主要由以下几个模块组成由 ：

  • nuxt.config.js
  • locales/index.js
  • locales/zh_CN.json
  • utils/config.js

# nuxt.config.js

module.exports = {  // other code ...  plugins: [    { src: '~/locales/index.js' } // locales 目录没有放置在 plugins 目录下主要是为了引用 json 文件方便  ],  // other code ...}

# locales/index.js

从 Nuxt.js 应用国际化（i18n）的示例 变化而来 :
import Cookies from 'js-cookie'import VueI18n from 'vue-i18n'import Vue from 'vue'Vue.use(VueI18n)export default ({ app, store }) => {  const data = {}  const locale = Cookies.get('hb_lang') || 'en_US'  const readDir = ['en_US', 'zh_CN', 'th_TH']  for (let i = 0; i < readDir.length; i++) {    data[readDir[i]] = Object.assign({}, require(`./${readDir[i]}.json`))  }  // Set i18n instance on app  // This way we can use it in middleware and pages asyncData/fetch  app.i18n = new VueI18n({    locale,    fallbackLocale: locale, // 语言环境中不存在相应massage键时回退到指定语言    messages: data  })}

# locales/zh_CN.json

{  "solutions":"解决方案",  "global":{    "login":"登录",    "register":"注册",    "logout":"注销",    "join":"加入",    "confirm":"确认",    "submit":"提交",    "reset":"重置",    "all":"全部",    "open":"打开",    "close":"关闭",    "userList": "用户列表"  },  "headerNav": {    "home": "首页",    "users":"用户"  },  "login": {    "username": "用户名",    "password": "密码"  },  "footer": {    "TermsOfUse": "使用条款",    "PrivacyPolicy": "隐私保护"  }}

调用方法 :
<h1 class="solutions">{{ $t('solutions') }}</h1>

# utils/config.js

import Cookies from 'js-cookie'const LangKey = 'hb_lang' // 语言export function getLanguage() {  return Cookies.get(LangKey)}export function setLanguage(data) {  return Cookies.set(LangKey, data)}export function removeLanguage() {  return Cookies.remove(LangKey)}

其中 , 当需要动态切换语言时，调用 setLanguage 方法即可， 例如:

import { setLanguage } from '~/utils/config.js'  setLanguage('en_US')

# 注意事项

以上配置须臾结合 Vue 的 {{}} 进行编辑, 例如上文所提到的 :
<h1 class="solutions">{{ $t('solutions') }}</h1>

倘若像下面这样则会导致切换语言时, 无法动态即时更新文案 :

// 不要这样写, 解决方法在下面<template>  <div>    <div class="solutions">{{ solutions }}</div>  </div></template><script>export default {  data() {    return {      solutions : this.$t('solutions')    }  }}</script>

解决方法 :

<template>  <div>    <div class="solutions">{{ solutions }}</div>  </div></template><script>export default {  watch: {    '$store.state.lang'(language) {      this.init()    }  },  data() {    return {      solutions : this.$t('solutions')    }  },  created() {    this.init()  },  methods: {    init(){      this.solutions = this.$t('solutions')    }  },}</script>

# 同系列的其他文章

  • Vue项目中使用国际化， 并配置动态切换语言的方法