Проблемы с настройкой vue-i18n для работы с nuxt generate

Я создаю небольшой проект Nuxt с нуля в качестве обучающего упражнения. Когда я использую локальный сервер, все работает, как задумано, но мой переключатель языка не обновляет ни одно из полей перевода, когда я использую nuxt generate.

Насколько я могу судить по устранению неполадок статического сайта, vue-i18n правильно заполняет текстовые поля переводом по умолчанию, он включает все языковые стандарты перевода в развернутом коде, а мой переключатель языка меняет окно. $ Nuxt. $ I18n. locale свойство. Я думаю, что, вероятно, я что-то неправильно понимаю и использую неправильно, но Google не смог решить эту проблему за меня.

(Я использую vue-i18n вместо nuxt-i18n, потому что это были требования старого теста на собеседование, и я повторно использую свой код для части портфолио.)

Исходный код: https://github.com/spacecowgoesmoo/Nuxt-Portfolio-Samples/tree/master/i18nArticle

Развернутый сайт: https://www.taylorcalderone.com/frontendPortfolio/subpages/i18nArticle/


javascript vue.js nuxt.js internationalization vue-i18n
person spacecowgoesmoo    schedule 11.06.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

установите vue-i18n командой:

npm install vue-i18n

добавить плагин в nuxt.config.js

plugins: ['~/plugins/i18n.js']

плагины / i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {

  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'fr': require('~/locales/fr.json')
   }
  })

  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
}

добавить в магазин index.js

export const state = () => ({
  locales: ['en', 'fr'],
  locale: 'en'
})

export const mutations = {
  SET_LANG (state, locale) {
    if (state.locales.includes(locale)) {
      state.locale = locale
    }
  }
}

locals / en.json

{
  "links": {
    "home": "Home",
    "about": "About",
    "english": "English version",
    "french": "French version"
 },
  "home": {
    "title": "Welcome",
    "introduction": "This is an introduction in English."
  },
  "about": {
    "title": "About",
    "introduction": "This page is made to give you more informations."
  }
}

местные жители / fr.json

{
  "links": {
    "home": "Accueil",
    "about": "À propos",
    "english": "Version Anglaise",
    "french": "Version Française"
  },
  "home": {
    "title": "Bienvenue",
    "introduction": "Ceci est un texte d'introduction en Français."
  },
  "about": {
    "title": "À propos",
    "introduction": "Cette page est faite pour vous donner plus d'informations."
  }
}

теперь вы используете i18n index.vue

<template>
  <div class="Content">
    <div class="container">
      <h1 class="Content__Title">
        {{ $t('home.title') }}
      </h1>
      <p>{{ $t('home.introduction') }}</p>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
person hossein vatankhah    schedule 21.07.2019

arrow_upward
0
arrow_downward

Обновить

Для меня эта проблема с командой генерации была связана с тем, что я использовал v-if в компоненте <nuxt>.

Ответ Хоссейна - это просто копия https://nuxtjs.org/examples/i18n/, которую я рекомендую вам вернуться.

ОП Я думаю, вам не хватает промежуточного программного обеспечения. И вы не должны использовать window.location, а использовать nuxt-ссылки, такие как <nuxt-link :to="$i18n.path('about')">Home</nuxt-link>, или в форме метода для вашего раскрывающегося списка, например:

handleSelect(path) {
      this.$router.push({
        path: this.$i18n.path(path)
      });
    }

В любом случае это работает для меня.

Я скопировал официальный пример Nuxt в письмо, и, похоже, все работает, за исключением захвата заголовка страницы и мета-описания с помощью nuxt generate.

Любые идеи будут оценены.

person Thomas    schedule 08.08.2019