1. 需要用到的庫
npm install vue vue-i18n --save
2. 配置 & 使用
常規(guī)的教程和問題，在這里就不贅述了，可以去官網(wǎng)查看文檔添祸。這里主要說一下，官方文檔里沒提到的寻仗。
官方文檔中使用的方法刃泌，并不是現(xiàn)在流行的vue單文件組件，即采用.vue格式的文件署尤。我們現(xiàn)在一般會(huì)使用vue-cli直接生成vue工程耙替，并通過webpack打包整個(gè)工程，最后在頁面中引入打包后的文件曹体。所以我下面說的俗扇，就是如何在這種模式下引入國際化功能。
眾所周知箕别，webpack會(huì)有一個(gè)入口文件（我們暫且命名為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: { ... } // 省略具體內(nèi)容
})
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
然后我們編譯工程除抛，并在瀏覽器中運(yùn)行狮杨，結(jié)果 ... 報(bào)錯(cuò)了！控制臺(tái)會(huì)打出如下信息
Uncaught TypeError: Cannot read property 'config' of undefined
跟蹤代碼镶殷，會(huì)發(fā)現(xiàn)錯(cuò)誤是出在vue-i18n.js中禾酱，具體位置如下
// vue-i18n.js
VueI18n.prototype._initVM = function _initVM (data) {
var silent = Vue.config.silent; // 這行報(bào)錯(cuò)了！；媲鳌颤陶！
Vue.config.silent = true;
this._vm = new Vue({ data: data });
Vue.config.silent = silent;
};
報(bào)錯(cuò)的原因正如上面提到的，Vue的取值是undefined陷遮。這個(gè)現(xiàn)象不難理解滓走，webpack打包后的文件是作為閉包處理的，外部js的取不到值實(shí)屬正常帽馋。既然知道原因了搅方，那解決方法就不難找到了。這里采用一種最簡單的方法绽族，直接把Vue對(duì)象掛載到外面去姨涡，在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實(shí)例化之前執(zhí)行
const i18n = new VueI18n({
locale: 'zh',
messages: { ... } // 省略具體內(nèi)容
})
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
還有一種方法比較優(yōu)雅吧慢，就是把window.Vue = Vue替換成Vue.use(vue-i18n)涛漂，代碼就不貼了。
3. 切換語言
在.vue中執(zhí)行下面的方法即可切換
{
// 其余配置略
methods: {
handleChangeLang() {
this.$i18n.locale = 'en'
}
}
}
4. 其他
由于也是第一次使用检诗，現(xiàn)在唯一擔(dān)心的就是當(dāng)工程很大的時(shí)候切換會(huì)不會(huì)卡頓匈仗，后期需要關(guān)注一下。
