vue i18n国际化

今天记录下自己做的一个vue项目国际化的实现，vue2.x+TS。

首先安装i18n插件 $ npm install vue-i18n

当然也可以这样引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

然后呢，我们在main.js里面引用,由于elementUI是用的js写的，所以如果小伙伴们用的是ts，需要手动配置一个.d.ts文件，否则会这样

配置的时候大概是这样

配置好之后呢，已经没有报错啦，我们就可以引入使用啦

import ElementLocale from 'element-ui/lib/locale'
import elementEnLocale from 'element-ui/lib/locale/lang/en'  // elementui 的英文语言包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // elementui 的中文语言包

Vue.use(VueI18n)

const messages = {
    'zh-CN': {
        ...require('../common/lang/zh'),
        ...elementZhLocale,
    },
    'zh-TW': {
        ...require('../common/lang/tw'),
        ...elementZhLocale,
    },
    'en-US': {
        ...require('../common/lang/en'),
        ...elementEnLocale,
    },
}
const localeLang = localStorage.getItem('localeLang')
const i18n = new VueI18n({
    locale: localeLang || 'en-US',
    messages,
})
ElementLocale.i18n((key: string, value: object) => i18n.t(key, value))

export default i18n

引入使用之后呢，我们需要先创建main.js里面相应位置引入的文件，就是这样子

我们需要把所有需要翻译的文本写入相应的文件里面，然后我在navbar组件里面定义了相应的切换语言的方法。

private onSubmit( type: string ) { 
      localStorage.setItem('localeLang', type) // 每次切换时把选中的语言存在本地，下次打开依旧是自己选中的语言
      let self_current_lang = type
      if (self_current_lang) {
        // 切换系统语言
        this.$i18n.locale = self_current_lang
        this.$message.success(`${this.$t('m.successText')}`)
      } else {
        this.$message.warning(`${this.$t('m.no_select_lang')}`)
      }
    }

最后页面使用是这样{{$t('')}},上图有实例。 就是这么简单···