1. 安裝vue-i8n依賴

npm i vue-i18n

2. 創(chuàng)建語言包文件

在src目錄下創(chuàng)建一個(gè)lang文件夾，同時(shí)創(chuàng)建zh.js(中文)，en.js(英文)，ja.js(日文)，fr.js(法文)四個(gè)語言包js文件，并創(chuàng)建一個(gè)index.js文件，用來整合語言包
對于一個(gè)項(xiàng)目來說，一個(gè)語言包需要包含所有頁面以及組件；在語言包以頁面為單位，創(chuàng)建一個(gè)對象；對公共的title或者按鈕名稱可以單獨(dú)提取出來。此處只展示中文和英文文件，其它語言包同中英文文件格式。
zh.js

export default {
  ModelObj: {
    title: '模板列表',
    rAddBtn: '新增模板',
    searchSelect: {
      optionLabel1: '所有狀態(tài)',
      optionLabel2: '啟動',
      optionLabel3: '禁止'
    },
    filterInputplac: '請輸入模板標(biāo)題',
    searchBtn: '搜索',
    resetBtn: '重置',
    table: {
      colu1: '模板標(biāo)題',
      colu2: '發(fā)布者',
      colu3: '創(chuàng)建時(shí)間',
      colu4: '狀態(tài)',
      colu5: '操作',
      operationbtn1: '管理字段',
      operationbtn2: '修改',
      operationbtn3: '刪除'
    }
  }
}

eh.js

export default {
  ModelObj: {
    title: 'Registration template list',
    rAddBtn: 'New registration template',
    searchSelect: {
      optionLabel1: 'All states',
      optionLabel2: 'start',
      optionLabel3: 'forbidden'
    },
    filterInputplac: 'Please enter the template title',
    searchBtn: 'search',
    resetBtn: 'reset',
    table: {
      colu1: 'Template title',
      colu2: 'publisher',
      colu3: 'Creation time',
      colu4: 'state',
      colu5: 'operation',
      operationbtn1: 'Management field',
      operationbtn2: 'modify',
      operationbtn3: 'delete'
    }
  }
}

基礎(chǔ)的語言包創(chuàng)建完之后在index.js文件中對這些語言包進(jìn)行整合。
Index.js
（1）引入自己新創(chuàng)建的語言包
（2）此處暫不說明國際化持久化以及element-ui組件國際化的兼容性
（3）創(chuàng)建一個(gè)messages對象，放入語言包
（需要注意，messages名稱不可更改，更改后失效，原因未查明，可能與vue-i18n中的html格式化有關(guān)）
（4）創(chuàng)建一個(gè)vue-i18n實(shí)例，messages對象放入實(shí)例中；最后導(dǎo)出

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 從語言包文件中導(dǎo)入語言包對象
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const messages = {
  zh: {
    ...zh,
    ...zhLocale
  },
  en: {
    ...en,
    ...enLocale
  }
}
const i18n = new VueI18n({
  messages,
  locale: userstore.state.langs,
  fallbackLocale: 'zh', // 若某個(gè)語言環(huán)境變量，則使用fallbackLocale環(huán)境下對應(yīng)的變量
  silentFallbackWarn: true, // 抑制警告
  globalInjection: true // 全局注入
})
export default i18n

3. main.js 引入

引入語言包后掛載到vue實(shí)例上

import i18n from './lang/index'
new Vue({
  el: '#app',
  router,
  i18n, // 掛載
  components: { App },
  template: '<App/>',
  store: userstore
})

4. 切換語言組件

為了方便使用，可以將切換語言的組件寫成全局組件，進(jìn)行全部頁面的語言切換。

<template>
  <div class="switch-lang-wrap">
    <!--新增切換語言按鈕-->
    <div class="change-lans">
      <el-radio-group v-model="radio" @change="changeLang">
        <el-radio :label="'zn'">中文</el-radio>
        <el-radio :label="'en'">英文</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'switchLang',
  data () {
    return {
      radio: this.$store.state.langs
    }
  },
  methods: {
    changeLang (val) {
      this.$nextTick(() => {
        this.$store.commit('setLangInfo', val)
        localStorage.setItem('lang', val)
        this.$i18n.locale = val
      })
    }
  }
}
</script>

<style scoped>
  .change-lans {
    position: fixed;
    top: 60px;
    left: 50%;
    margin: auto;
    z-index: 1000;
  }
</style>

5. 模板渲染使用

國際化字段更換還可以表示復(fù)數(shù)，以及傳遞動態(tài)參數(shù)，具體用法參考官網(wǎng)：https://kazupon.github.io/vue-i18n/introduction.html

 <p class="title">{{$t('ModelObj.title')}}</p>

6. 國際化語言切換持久化

對于目前定義的變量而言，頁面刷新后就會回歸到初始狀態(tài)；若是需要保留持久化，則可存儲到vuex。

changeLang (val) {
      this.$nextTick(() => {
        this.$store.commit('setLangInfo', val)
        localStorage.setItem('lang', val)
        this.$i18n.locale = val
      })
    }	

7. element-ui組件國際化

對于vue項(xiàng)目來說，element組件使用較為普遍，其中涉及一些組件的語言切換，具體國際化方法可參考官網(wǎng)文檔：https://element.eleme.cn/#/zh-CN/component/i18n
Element-ui組件國際化時(shí)需要注意，其版本與vue-i18n的版本兼容問題較多，針對vue2來說，vue-i18n版本需要較低一些；vue3中可自己去查看官網(wǎng)
此處element-ui國際化的用法以及創(chuàng)建的語言包融合如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import userstore from '../vuex/userstore'
// 從語言包文件中導(dǎo)入語言包對象
import zh from './zh'
import en from './en'
// element-ui 組件國際化
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

ElementLocale.i18n((key, value) => i18n.t(key, value))
Vue.use(VueI18n)
const messages = {
  zh: {
    ...zh,
    ...zhLocale
  },
  en: {
    ...en,
    ...enLocale
  },
  ja: {
    ...ja,
    ...jaLocale
  },
  fr: {
    ...fr,
    ...frLocale
  }
}
const i18n = new VueI18n({
  messages,
  locale: userstore.state.langs,
  fallbackLocale: 'zh', // 若某個(gè)語言環(huán)境變量，則使用fallbackLocale環(huán)境下對應(yīng)的變量
  silentFallbackWarn: true, // 抑制警告
  globalInjection: true // 全局注入
})
export default i18n

ps：菜鳥一枚，僅以此記錄自己動手實(shí)施的過程，若有問題，還請指正文章來源地址http://www.zghlxwxcb.cn/news/detail-432079.html

到了這里，關(guān)于vue2+element-ui 實(shí)現(xiàn)國際化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！