vue element 多语言设置

如看着不方便  看博客 ：https://mp.csdn.net/postedit/82658916

推荐文章  

https://www.cnblogs.com/rogerwu/p/7744476.html

https://segmentfault.com/a/1190000015008808

https://blog.csdn.net/zuorishu/article/details/81708585

项目中需要自定义切换中/英文，基于vue.js，结合vue-i18n，ElementUI,以下是使用方法。

ElementUI国际化链接： http://element-cn.eleme.io/#/...

vue-i18n：https://github.com/kazupon/vu...

安装: npm install vue-i18n

vue.js+vue-i18n国际化

先不使用ElementUI，就简单的vue.js+vue-i18n使用方法：

在main.js同级建i18n新文件夹，里面新建i18n.js、langs文件夹，langs文件夹下新建en.js、cn.js;目录如下:

//i18n.js

importVuefrom'vue'importVueI18nfrom'vue-i18n'importmessagesfrom'./langs'

Vue.use(VueI18n)     //从localStorage 中拿到用户的语言选择，如果没有，那默认中文。

consti18n =newVueI18n({locale: localStorage.lang ||'cn',    messages,})

exportdefaulti18n

//langs/index.js

importenfrom'./en';importcnfrom'./cn';exportdefault{en: en,cn: cn}

//en.js

consten = {    message: {'hello':'hello, world',    }}exportdefaulten;

//cn.js

constcn = {    message: {'hello':'你好，世界',    }}exportdefaultcn;

//main.js添加下面代码

importi18nfrom'./i18n/i18n';window.app =newVue({el:'#app',  router,  store,  i18n,template:'',components: { App }})

接下来是在页面中使用、切换语言。

//html:

{{$t('message.hello')}}

//js切换语言

data(){    return {        lang:'en'}},methods: {    switchLang()  {        this.$i18n.locale= this.lang}}

通过改变this.$i18n.locale的值就可以自动切换页面的语言了，en,ja,cn...等等

vue.js+vue-i18n+elementUI国际化

更改的地方不多，如下

//i18n.js

importVuefrom'vue'importlocalefrom'element-ui/lib/locale';importVueI18nfrom'vue-i18n'importmessagesfrom'./langs'Vue.use(VueI18n)//从localStorage中拿到用户的语言选择，如果没有，那默认中文。consti18n =newVueI18n({locale: localStorage.lang ||'cn',    messages,})locale.i18n((key, value) =>i18n.t(key, value))//为了实现element插件的多语言切换exportdefaulti18n

//en.js

importenLocalefrom'element-ui/lib/locale/lang/en'consten = {message: {'hello':'hello, world',    },    ...enLocale}exportdefaulten;

//cn.js

importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'constcn = {message: {'hello':'你好，世界',    },    ...zhLocale}exportdefaultcn;