vue实现国际化，vue+i18n+element国际化

 安装国际化语言插件vue-i18n：

npm install vue-i18n --save

本文使用的i18n版本：

8.10.0

1.创建语言包：

CH.json  

{
  "errText": {
    "err_tel": "手机号码格式错误!",
  }
}

EN.json

{
  "errText": {
    "err_tel": "Mobile phone number format error!",
  }
}

 

2.main.js中配置：

import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'en',
    messages: {
        'zh': Object.assign(require("@/assets/lang/CH.json"), zhLocale),
        'en': Object.assign(require("@/assets/lang/EN.json"), enLocale)
    }
})
locale.i18n((key, value) => i18n.t(key, value))


new Vue({
    render: h => h(App),
    i18n
}).$mount('#app')

 

3.在页面中使用

<el-input :placeholder="$t('errText.err_tel')"></el-input>

<p>{{$t('errText.err_tel')}}</p>

 

4.语言切换

<button @click="toggleLang('zh')" :disabled="$i18n.locale == 'zh'">中文</button>
<button @click="toggleLang('en')" :disabled="$i18n.locale == 'en'">英文</button>

toggleLang(lang) {
      if(lang == 'zh'){
        localStorage.setItem('lang', 'zh')
        this.$i18n.locale = localStorage.getItem('lang')
        this.$message({
          message: '切换为中文！',
          type: 'success'
        })
      } else if (lang == 'en') {
        localStorage.setItem('lang', 'en')
        this.$i18n.locale = localStorage.getItem('lang')
        this.$message({
          message: 'Switch to English!',
          type: 'success'
      })
}