在Vue中加入国际化（i18n）功能

1. 需要用到的库

npm install vue vue-i18n --save

2. 配置 & 使用

常规的教程和问题，在这里就不赘述了，可以去官网查看文档。这里主要说一下，官方文档里没提到的。

官方文档中使用的方法，并不是现在流行的vue单文件组件，即采用.vue格式的文件。我们现在一般会使用vue-cli直接生成vue工程，并通过webpack打包整个工程，最后在页面中引入打包后的文件。所以我下面说的，就是如何在这种模式下引入国际化功能。

众所周知，webpack会有一个入口文件（我们暂且命名为main.js），入口文件也是vue初始化的场所，基本写法如下

// main.js
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

下面我们参考官方文档，把vue-i18n加到工程里面

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App'

const i18n = new VueI18n({
  locale: 'zh',
  messages: { ... } // 省略具体内容
})

new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

然后我们编译工程，并在浏览器中运行，结果 ... 报错了！控制台会打出如下信息

Uncaught TypeError: Cannot read property 'config' of undefined

跟踪代码，会发现错误是出在vue-i18n.js中，具体位置如下

// vue-i18n.js
VueI18n.prototype._initVM = function _initVM (data) {
  var silent = Vue.config.silent; // 这行报错了！！！
  Vue.config.silent = true;
  this._vm = new Vue({ data: data });
  Vue.config.silent = silent;
};

报错的原因正如上面提到的，Vue的取值是undefined。这个现象不难理解，webpack打包后的文件是作为闭包处理的，外部js的取不到值实属正常。既然知道原因了，那解决方法就不难找到了。这里采用一种最简单的方法，直接把Vue对象挂载到外面去，在main.js中加入window.Vue = Vue语句，完整代码

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App'

window.Vue = Vue // 要在vue-i18n实例化之前执行

const i18n = new VueI18n({
  locale: 'zh',
  messages: { ... } // 省略具体内容
})

new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

还有一种方法比较优雅，就是把window.Vue = Vue替换成Vue.use(vue-i18n)，代码就不贴了。

3. 切换语言

在.vue中执行下面的方法即可切换

{
  // 其余配置略
  methods: {
    handleChangeLang() {
      this.$i18n.locale = 'en'
    }
  }
}

4. 其他

由于也是第一次使用，现在唯一担心的就是当工程很大的时候切换会不会卡顿，后期需要关注一下。