npm 下载 vue-i18n 插件
npm install vue-i18n -S
定义文件静态目录(这里用到简体，繁体，英文)
image.png
文件采取对象形式，编写个版本语言。简繁英
image.png
在main.js中引用
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: _.isNil(localStorage.getItem('i18n')) ? 'hk' : localStorage.getItem('i18n'),//_.isNil是个工具库判断是否为空，具体可以参考Lodash,
messages: {
en: require('./static/i18n/en').default,
cn: require('./static/i18n/cn').default,
hk: require('./static/i18n/hk').default
},
silentTranslationWarn: true//解决警告问题
});
引用完成后在项目中应用
<el-dropdown trigger="click" @command='setLang'>
<span class="el-dropdown-link">
<i class="el-icon-setting" style="color:#fff"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="en" >{{$t('lang.english')}}</el-dropdown-item>
<el-dropdown-item command="cn" >{{$t('lang.simplified_chinese')}}</el-dropdown-item>
<el-dropdown-item command="hk" >{{$t('lang.traditional_chinese')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
使用------
1.页面中是{{$t()}}
2.标签属性是 $t('')
3.js中是this.$t('')
setLang(val){
localStorage.setItem('i18n',val);
this.$router.go(0) //刷新页面
}
