Question

我正在从头开始构建一个小的Nuxt项目，作为学习练习。使用本地服务器时一切正常，但是使用nuxt generate时，语言切换器未更新任何翻译字段。

据我所知，对静态站点进行故障排除时，vue-i18n正确地使用默认翻译填充了文本字段，其中包括已部署代码中的所有翻译语言环境，并且我的语言切换器正在更改window。$ 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/

Answer 1

通过命令安装vue-i18n：

npm install vue-i18n

将插件添加到nuxt.config.js

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

plugins / 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."
  }
}

locals / 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>

Answer 2

更新

对我来说，generate命令出现此问题是由于我在v-if组件上使用<nuxt>。

侯赛因的答案只是https://nuxtjs.org/examples/i18n/的一个副本，我建议您再次访问。

OP，我认为您缺少中间件。而且，您不应该使用window.location，而是使用<nuxt-link :to="$i18n.path('about')">Home</nuxt-link>之类的nuxt链接，或者以这样的方法形式使用下拉菜单：

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

无论如何对我有用。

我已经将Nuxt官方示例复制到了信件上，除了使用nuxt generate捕获页面标题和元描述外，一切似乎都可以正常工作。

任何见解都会受到赞赏。

使vue-i18n与nuxt生成一起使用时遇到问题

2 个答案: