Возникли проблемы при получении vue-i18n для работы с генерацией nuxt - PullRequest
Новая
       41

Возникли проблемы при получении vue-i18n для работы с генерацией nuxt

1 голос
/ 11 июня 2019

Я строю небольшой проект 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/

1 Ответ

0 голосов
/ 21 июля 2019

установить 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
    }
  }
}

местные / 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>
...