vue + element-ui + vue-i18n 多語言國際化

1.element-ui 並不支援最新版的vue-i8n 外掛，開發時注意i18n的版本，當然本示例成功解決版本不相容的問題，詳細說明請看element官方文件：http://element-cn.eleme.io/#/zh-CN/component/i18n

教程開始

1.安裝 vue-i18n 外掛 (預設為最新版)

npm install vue-i18n

2.建立資料夾/檔案

在main.js同級建i18n新資料夾，裡面新建i18n.js、langs資料夾，langs資料夾下新建en.js、cn.js、index.js;

3.各檔案程式碼

//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 = {
  router:{
    'home' : '系統首頁',
    'document' : '文件中心',
    'document1':'文件1',
    'document2':'文件2',
    'document3':'文件3',
    'document4':'文件4',
    'document5':'文件5',
    'echarts' : '圖表外掛',
    'table' : '表格外掛',
    'component' : '元件列表',
    'component1' : '元件1',
    'component2' : '元件2',
    'component3' : '元件3',
    'component4' : '元件4',
    'component5' : '元件5',
    'set':'系統設定',
    'set1':'設定1',
    'set2':'設定2',
    'set3':'設定3',
    'set4':'設定4',
    'set5':'設定5',
    'set6':'設定6',
    'set7':'設定7',
  },
  ...zhLocale
}

export default cn;

 

//en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  router:{
    'home' : 'Home',
    'document' : 'Documente',
    'document1':'Documente1',
    'document2':'Documente2',
    'document3':'Documente3',
    'document4':'Documente4',
    'document5':'Documente5',
    'echarts' : 'Echarts',
    'table' : 'Table',
    'component' : 'Component',
    'component1' : 'Component1',
    'component2' : 'Component2',
    'component3' : 'Component3',
    'component4' : 'Component4',
    'component5' : 'Component5',
    'set':'Set Center',
    'set1':'Set 1',
    'set2':'Set 2',
    'set3':'Set 3',
    'set4':'Set 4',
    'set5':'Set 5',
    'set6':'Set 6',
    'set7':'Set 7',
  },
  ...enLocale
}

export default en;

//index.js
import en from './en';
import cn from './cn';
export default {
  en: en,
  cn: cn
}

//main.js  中插入 import i18n from './i18n/i18n'   並在vue例項中掛載
//main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import Echarts from 'echarts'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

import i18n from './i18n/i18n'



Vue.prototype.$echarts = Echarts
Vue.config.productionTip = false

Vue.use(ElementUI)



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

4.使用示例

//在一個元件中 通過{{$t('router.document')}}  引用

<template>
    <div>
      <p>{{$t('router.document')}}</p>
    </div>
</template>

<script>
    export default {
        name: "Lang",
    }
</script>

<style scoped>

</style>

更改中英文顯示方式

//在任意元件中加入按鈕  改變 this.$i18n.locale 對應的值就行 'en'表示英文，'cn'表示中文

 <el-button type="success" @click="switchLang()">更換語言</el-button>
   
<script>
    methods:{
          switchLang()  {
            if(this.$i18n.locale == 'en'){
              this.$i18n.locale = 'cn'
            }else{
              this.$i18n.locale = 'en'
            }
          }
        },
</script>