demo 場景需求分析
需求很簡單，左上角 ‘’網(wǎng)易云音樂‘’就是一個中英文切換的按鈕风喇，點(diǎn)擊彈出提示框，確認(rèn)切換語言后缕探，實(shí)現(xiàn)英文版本魂莫。
切換成英文版本：
三、實(shí)現(xiàn)國際化
1爹耗、我們得先有開發(fā)環(huán)境耙考，先有項(xiàng)目跑起來谜喊，我推薦如果是喜歡用 vue 的小伙伴，可以嘗試 vue-cli 官方腳手架
2倦始、我們需要安裝 vue-i18n, 推薦 npm 包依賴：
$ npm install vue-i18n
當(dāng)然你也可以這樣：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
3斗遏、注入 vue 實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用 api 和 模板語法
這邊我是順著使用 npm 安裝依賴進(jìn)行鞋邑。先在 main.js 中引入 vue-i18n诵次。
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通過插件的形式掛載
const i18n = new VueI18n({
locale: 'zh-CN', // 語言標(biāo)識
//this.$i18n.locale // 通過切換locale的值來實(shí)現(xiàn)語言切換
messages: {
'zh-CN': require('./common/lang/zh'), // 中文語言包
'en-US': require('./common/lang/en') // 英文語言包
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n, // 不要忘記
store,
router,
template: '<App/>',
components: { App }
})
上面的代碼正式將 vue-i18n 引入 vue 項(xiàng)目中，創(chuàng)建一個 i18n 實(shí)例對象枚碗，方便全局調(diào)用逾一。我們通過 this.$i18n.locale 來進(jìn)行語言的切換，同樣的我這邊的例子里就是通過點(diǎn)擊事件视译，點(diǎn)擊‘’網(wǎng)易云音樂‘’，來觸發(fā)事件归敬，切換locale 的值酷含。
4、ok, 引入的事情就是這樣汪茧，那么既然實(shí)現(xiàn)國際化椅亚，這邊簡單的是中英文切換，那么自然我們需要中英文兩套語言的文件舱污，vue-i18n中相對簡單呀舔，只需要兩個 js 文件，通過 require 的形式引入到 main.js扩灯。
en.js 英文語言包：
export const m = {
music: 'Music',//網(wǎng)易云音樂
findMusic: 'FIND MUSIC',//發(fā)現(xiàn)音樂
myMusic: 'MY MUSIC',//我的音樂
friend: 'FRIEND',//朋友
musician: 'MUSICIAN',//音樂人
download: 'DOWNLOAD'//下載客戶端
}
zh.js中文語言包：
export const m = {
music: '網(wǎng)易云音樂',
findMusic: '發(fā)現(xiàn)音樂',
myMusic: '我的音樂',
friend: '朋友',
musician: '音樂人',
download: '下載客戶端'
}
最后我們只需要通過觸發(fā)事件的形式媚赖，來控制 locale 的值，去調(diào)用對應(yīng)的語言包就可以實(shí)現(xiàn)國際化珠插。
5惧磺、組件中如何去切換 locale 的值，實(shí)現(xiàn)語言切換捻撑。
locale: 'zh-CN', // 語言標(biāo)識
messages: {
'zh-CN': require('./common/lang/zh'), // 中文語言包
'en-US': require('./common/lang/en') // 英文語言包
}
在 main.js 中的代碼中磨隘，可以看到，當(dāng) locale 的值為‘zh-CN’時顾患，版本為中文番捂；當(dāng) locale 的值為‘en-US’,版本為英文。當(dāng)然你也可以換成 zh 和 en江解，這個不固定设预，只需要對應(yīng)上。
好了犁河，現(xiàn)在來看一下絮缅，我組件中的一個點(diǎn)擊事件中如何進(jìn)行切換鲁沥。
/**
* 切換語言
*/
changeLangEvent() {
this.$confirm('確定切換語言嗎?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.lang;//關(guān)鍵語句
}else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;//關(guān)鍵語句
}
}).catch(() => {
this.$message({
type: 'info',
});
});
}
這邊的重點(diǎn)就是，點(diǎn)出的‘’關(guān)鍵語句‘’：this.$i18n.locale,當(dāng)你賦值為‘zh-CN’時耕魄，導(dǎo)航欄就變成中文画恰；當(dāng)賦值為 ‘en-US’時，就變成英文吸奴。效果圖就是文章前面的樣子允扇。
6、到這则奥，前端 vue-i18n 國際化插件在 vue-cli 模塊化環(huán)境中的開發(fā)實(shí)踐就全部完成了考润。
四、vue-i18n 數(shù)據(jù)渲染的模板語法
我們知道 vue 中對于文字?jǐn)?shù)據(jù)的渲染读处，有以‘’{{}}‘’或者 v-text糊治、v-html等的形式，同樣的使用國際化后罚舱，依舊可以沿用井辜，但需要一點(diǎn)修改。
v-text:
<span v-text="$t('m.music')"></span>
{{}}:
<span>{{$t('m.music')}}</span>
