1、安装 vue-i18n
npm install vue-i18n --save
2、为防止在main.js中代码过于冗余 则在src下面新建language文件夹
2.1 在language下面新建i18n.js 文件以及自己所需要的语言包
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下面建立所需要的语言包（此处只列举中/英文）
language-en.js
export const m = {
name: 'name',
}
language-zh.js
export const m = {
name: '名称',
}
需要国际化的字段
<span>{{$t('m.name')}}</span>
切换语言
<van-button block type="info" @click="toggle()"> 切换语言</van-button>
export default {
methods: {
toggle(){
if ( this.lang === 'en' ) {
this.lang = 'zh';
}else {
this.lang = 'en';
}
this.$i18n.locale = this.lang;//关键语句
}
},
};
