vue-i18n和ElementUI国际化使用总结

vue-i18n官方文档：http://kazupon.github.io/vue-i18n/en/started.html
element-ui文档: http://element-cn.eleme.io/#/zh-CN/component/i18n
资料分享完了，现在开始总结vue-i18n使用方法：

• 1、先看一下我的项目结构

  
  
  

  7MD}500FK{[email protected]
• 2、废话不多说，直接上代码：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './i18n/i18n';

Vue.use(ElementUI)

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: ''
})

i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)

//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

cn.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
    message: {
        'hello': '你好，世界',
        'msg': '提示',
    }  
}

export default cn;

en.js

    import enLocale from 'element-ui/lib/locale/lang/en'
    const en = {
        message: {
            'hello': 'hello, world',
            'msg': 'point out',
        }
    }

    export default en;

然后写一个模板测试一下：

可能遇到的问题

1、记不住切换后的语言

我们在切换语言后，刷新一下浏览器又成了默认语言。那么可以在切换语言的方法中加入 localStorage.setItem("language", "你定义的语言包，如zh/en")

2、将this.$t() 写到了data属性里，切换语言不起作用

data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。
官方的解决办法是，建议我们将表达式写到 computed 属性里，不要写到 data 里

3、后台获取过来的动态数据，在切换国际语言后不起作用

在witch中监听 i18n语言变化，重新调取接口。

watch: {
    '$i18n.locale'() {
        // 这里写调用接口的逻辑
    }
}

好了，到这里就结束了，有时间还是多去看看vue-i18n文档
最后声明一下，这篇文章是借鉴下面这位老兄的文章写的：https://segmentfault.com/a/1190000012779120#articleHeader1