nuxt使用vue-i18n语言国际化

安装

安装命令：npm i vue-i18n  /  yarn add  vue-i18n

使用

新建locales文件夹，分别新建对应语言的json文件，例：

在plugins文件夹中新建i18n.js文件

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

Vue.use(VueI18n)

export default ({ app, store }) => {
    app.i18n = new VueI18n({
        locale: app.$cookies.get('lang_code') || 'en-gc',
        fallbackLocale: 'en-gc',
        silentTranslationWarn: true, // *解决不必要的国际化警告
        messages: {
            'en-gc': require('@/locales/en_US.json'), // 引入locales中创建的json文件
            'ja-jp': require('@/locales/ja_JP.json'),
        }
    })
}

创建后在nuxt.config.js中配置

  plugins: [
    { src: '~/plugins/i18n.js' }
  ],

路由跳转的处理在middleware中间件中进行

 export default function ({ isHMR, app, store, route, params, error, redirect }) {

  if (isHMR) {
    return
  }
  
  const defaultLocale = app.i18n.fallbackLocale;
  const locale = params.lang || defaultLocale;

  app.$cookies.set('lang_code', locale);
  
  const url = `/${locale}${route.fullPath}`;
  return redirect(url);

}

具体路由处理根据需求情况来定

nuxt.config.js中配置中间件中的js文件

  router: {
    middleware: ['pageRedirect']
  }

在vue页面中使用

（1）标签属性中的国际化，例如placeholder（添加v-bind动态绑定）:

 <input type="text" :placeholder="$t('support.productRegistion.enterEmail')"/>

(en_US.json文件)

（2）插值表达式{{ }}中的国际化：

 <div class="top-text">
          {{ $t('support.productRegistion.topText1') }}
 </div>

（3）data中的国际化(使用this.来获取)：

 data() {
    return {
      errMessage: {
        emailErrorMessage: this.$t('support.productRegistion.emailError'),
        emailNoneMessage: this.$t('support.productRegistion.emailRequired'),
        password_repeat_Error: this.$t('support.productRegistion.passwordInconsistency'),
        passwordErrorMessage: this.$t('support.productRegistion.passwordInvalid'),
      }
    }
  }

注意点

vuex没有数据持久化，因为nuxt是服务器渲染，在created生命周期里，如window、Dvuex没有数据持久化，因为nuxt是服务器渲染，在created生命周期里，如window、Document、localStorage等对象只存在于客户端，都用不了。

解决方案是使用cookie-universal-nuxt

 安装命令：npm i cookie-universal-nuxt / yarn add cookie-universal-nuxt

nuxt.config.js中modules添加：

 modules:[
  //有参数配置的
 'cookie-universal-nuxt', ['cookie-universal-nuxt', {
      parseJSON: true
    }],
 // 无参数配置
 'cookie-universal-nuxt'
 ]

vue文件中使用：

 this.$cookies.set('lang_code', locale); // 存储
 this.$cookies.get('lang_code'); // 获取

nuxt中间件中使用：

 app.$cookies.set('lang_code', locale); // 存储
 app.$cookies.get('lang_code'); // 获取