1.安裝 vue-i18n, 推薦 npm 包依賴
$ npm install vue-i18n
2.注入 vue 實(shí)例中，項(xiàng)目中實(shí)現(xiàn)調(diào)用 api 和 模板語法
main.js 中引入 vue-i18n:
import VueI18n from?'vue-i18n'
Vue.use(VueI18n)? // 通過插件的形式掛載
const?i18n?=?new?VueI18n({
????locale:?'zh-CN',????//?語言標(biāo)識(shí)
????//this.$i18n.locale?//?通過切換locale的值來實(shí)現(xiàn)語言切換
????messages:?{
????????'zh-CN':?require('./common/zh'),???//?中文語言包
????????'en-US':?require('./common/en')????//?英文語言包
????}
})
newVue({?
?el:'#app',
?i18n,? ??// 不要忘記
?template:'<App/>',?
?components: { App }
})
上面的代碼正式將 vue-i18n 引入 vue 項(xiàng)目中，創(chuàng)建一個(gè) i18n 實(shí)例對象，方便全局調(diào)用。我們通過?this.$i18n.locale?來進(jìn)行語言的切換。
3.簡單的是中英文切換，那么自然我們需要中英文兩套語言的文件，vue-i18n中相對簡單，只需要兩個(gè) js 文件，通過 require 的形式引入到 main.js
4.組件中如何去切換 locale 的值，實(shí)現(xiàn)語言切換。
main.vue
這邊的重點(diǎn)就是，點(diǎn)出的‘’關(guān)鍵語句‘’：this.$i18n.locale,當(dāng)你賦值為‘zh-CN’時(shí)，導(dǎo)航欄就變成中文；當(dāng)賦值為 ‘en-US’時(shí)，就變成英文。效果圖就是文章前面的樣子。
5.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>
例:
