vue 后台翻译_vue前端vue-i18n实现翻译功能

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//解决警告问题

});

引用完成后在项目中应用

{{$t('lang.english')}}

{{$t('lang.simplified_chinese')}}

{{$t('lang.traditional_chinese')}}

使用------

1.页面中是{{$t()}}

2.标签属性是 $t('')

3.js中是this.$t('')

setLang(val){

localStorage.setItem('i18n',val);

this.$router.go(0) //刷新页面

}