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. 其他
由于也是第一次使用，现在唯一担心的就是当工程很大的时候切换会不会卡顿，后期需要关注一下。
网友评论