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;