因为我的项目须要,在这里记录一下对于nuxt 国际化应用,并增加 刷新页面语言不重置性能。
参考nuxt 官网提供的国际化利用:nuxt 官网参考代码

1,文件构造

|--locales           ------寄存不同语言的json 文件。    |--en.json    |--fr.json|--middleware         ------nuxt 的中间件,解决路由    |--i18n.js|--pages              ------具体页面,国际化的页面须要在_lang 下,例如:pages/en/about    |--_lang      |--about.vue|--plugins            ------实现语言切换的中央。    |--i18n.js|--store              ------应用vuex 存储。    |--i18n.jsjs|--nuxt.config.js     ------国际化相干配置

2,装置

npm install vue-i18n --save

3,应用

3.1 调用,初始渲染

国际化的内容要蕴含在 { { $t( ) } }

<h1 class="titleFont">select you language</h1>        {{ $t('links.about') }}

links.about 是语言的json 文件里的字段内容。初始渲染为 app.i18n.fallbackLocale 的值。
app.i18n.fallbackLocaleplugins-i18n.js 里配置。

3.2,语言切换

HTML

<div class="languageInfo" @click="changeLanguage('zh')">  <img src="../assets/img/language/China.png" alt="" width="35px" height="35px">  <span class="languageFont">简体中文</span></div>

js

changeLanguage(language){  this.$i18n.locale = language;  Cookies.set('lang', language);}

具体实现切换的办法是, this.$i18n.locale = language;
通过 cookie 保留 已抉择的语言。因为,在切换语言,并手动刷新页面之后,语言会重置为默认值。无奈记录以后抉择的语言。所以要进行本地保留。
不应用 localStorage 的起因是,在plugins---i18n.js里调用 localStorage.getItem() 时会呈现 'localStorage' is not defined 的问题。
在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,将须要应用localStorage的代码放到浏览器应用的生命周期(mounted)中。

3.3调用本地存储的语言

// plugins---i18n.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-cookie'Vue.use(VueI18n)export default ({ app, store }) => {  // Set i18n instance on app  // This way we can use it in middleware and pages asyncData/fetch  app.i18n = new VueI18n({    locale:  Cookies.get('lang') || store.state.locale,    fallbackLocale: 'en',    messages: {      en: require('../locales/en.json'),      fr: require('../locales/fr.json'),      zh: require('../locales/zh.json'),    }  })  app.i18n.path = (link) => {    if (app.i18n.locale === app.i18n.fallbackLocale) {      return `/${link}`    }    return `/${app.i18n.locale}/${link}`  }}

至此,国际化的切换,保留的基本功能曾经全副实现了。

相干补充
1,js-cookie 的npm 装置命令

npm    install --save js-cookie

2,各文件具体代码。
这些在官网上都有,这里粘进去,也不便大家查看。
store-index.js

//store-index.jsexport const state = () => ({  locales: ['en', 'fr','zh'],  locale: 'fr'})export const mutations = {// 此处为设置locale  SET_LANG(state, locale) {      if (state.locales.includes(locale)) {          state.locale = locale      }  }}

nuxt.config.js

 plugins: [    '~/plugins/i18n'  ],  router: {    middleware: ['i18n']  },

middleware---i18n.js

export default function ({ isHMR, app, store, route, params, error, redirect }) {  const defaultLocale = app.i18n.fallbackLocale  // If middleware is called from hot module replacement, ignore it  if (isHMR) { return }  // Get locale from params  const locale = params.lang || defaultLocale  if (!store.state.locales.includes(locale)) {    return error({ message: 'This page could not be found.', statusCode: 404 })  }  // Set locale  store.commit('SET_LANG', locale)  app.i18n.locale = store.state.locale  // If route is /<defaultLocale>/... -> redirect to /...  if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {    const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')    const re = new RegExp(toReplace)    return redirect(      route.fullPath.replace(re, '/')    )  }}

plugins---i18n.js
见 上文 3.3调用本地存储的语言