1旬薯、安裝 vue-i18n
npm install vue-i18n --save
2乍赫、為防止在main.js中代碼過(guò)于冗余 則在src下面新建language文件夾
2.1 在language下面新建i18n.js 文件以及自己所需要的語(yǔ)言包
import?Vue?from?'vue'
import?VueI18n?from?'vue-i18n'
Vue.use(VueI18n)
const?i18n?=?new?VueI18n({
????locale:??'en',
????messages:?{
????????'en':?require('./language-en'),
????????'zh':?require('./language-zh'),
????????'jp':?require('./language-jp'),
????}
??})
export?default?i18n
3.在main.js中引入i18n.js
import?i18n?from?'./language/i18n';
new?Vue({
??i18n,
??router,
??store,
??render:?h?=>?h(App)
}).$mount("#app");
4. 在language下面建立所需要的語(yǔ)言包（此處只列舉中/英文）
language-en.js
export?const?m?=?{?
????name:?'name',
??}
language-zh.js
export?const?m?=?{?
????name:?'名稱',
??}
需要國(guó)際化的字段
<span>{{$t('m.name')}}</span>
切換語(yǔ)言
?<van-button?block?type="info"?@click="toggle()"> 切換語(yǔ)言</van-button>
export?default?{
??methods:?{
????toggle(){
????????if?(?this.lang?===?'en'?)?{
??????????this.lang?=?'zh';
???????}else?{
??????????this.lang?=?'en';
???????}
??????????this.$i18n.locale?=?this.lang;//關(guān)鍵語(yǔ)句
????}
??},
};
