vue實現多語言國際化(vue-i18n)，結合element ui、vue-router、echarts以及joint等。

老板說我們的項目要和國際接軌，於是乎，加上了多語言（vue-i18n）。項目用到的UI框架是element ui ，后續echarts、joint等全都得加上多語言。

 

一、言歸正傳，i18n在vue項目里如何使用呢？

 

第一步，Hold On！不對啊，肯定是先install啊，不install怎么use？急得我都和國際接軌了！！！

npm install vue-i18n -save

看到這段話得時候相信you and me 已經把它install好了，現在，してください....額，有點太接軌了吧！日語都出來了，咳咳，現在，我們是不是得在main.js里邊引入vue-i18n呢，然后在目錄下建立language文件夾了呢！！！

import VueI18n from "vue-i18n";

客官且慢，先別急着動你的small 手手哦！在什么目錄下建立語言包的文件夾呢？難道要在main.js下？

想了想覺得不對。還是在utils文件夾下，建立一個locales文件夾，最后在main.js里邊引入。

 

第二步，隨便你在哪里建立一個locales文件夾，在locales下建立index.js、en.json(English)、和zh.json(中文)三個文件。

不要問我en.json以及zh.json是用來干嘛的，問就是用來存放語言的！

我們以 ‘你好帥’ 作為多語言的案例，注意，兩個文件里邊key一定要是一樣的。

en.json 文件:

{
  "handsome"：“ZZC,You're handsome”  
}

zh.json 文件:

{
  "handsome"：“ZZC,你好帥”  
}

 

第三步，我們在index.js來寫多語言的實現。好，兩分鍾已經過去了，代碼已經寫好了！哈哈哈，看下邊代碼吧，有注釋哦~

import Vue from 'vue' // 引入vue實例
import VueI18n from 'vue-i18n' // 引入vue-i18n多語言包

Vue.use(VueI18n) // vue使用vue-i18n

const DEFAULT_LANG = 'en' // 默認語言為英文
const LOCALE_KEY = 'DemoLanguage' // localStorage來存放的key，名字隨便定，接下來會用到。

const locales = { // 引入zh.json以及en.json
    zh: require('./zh.json'),
    en: require('./en.json')
}

const i18n = new VueI18n({ // 創建帶有選項的 VueI18n 實例
    locale: DEFAULT_LANG, // 語言標識，在這里默認為en,即為英文
    messages : locales // 語言包，上邊創建的json文件
})

export const setup = lang => { //切換語言的函數，lang為語言標識，en或者zh
  　// 在此判斷lang的值，如果未定義，則讓lang默認為DEFAULT_LANG，目的是為了讓用戶在未選擇語言的時候默認為英文。
    if(lang == undefined){
        lang = window.localStorage.getItem(LOCALE_KEY)
        if ( locales[lang] == undefined ) {
            lang = DEFAULT_LANG
        }
    }
　　// 若lang有值，那么存入localStorage中，key為LOCALE_KEY,value為lang。
    window.localStorage.setItem(LOCALE_KEY, lang)
    Object.keys(locales).forEach(item => {
        document.body.classList.remove('lang-${item}')
    })
    document.body.classList.add('lang-${lang}')
    document.body.setAttribute('lang', lang)

    Vue.config.lang = lang
    i18n.locale = lang
}

setup()
export default i18n

 

第四步，代碼寫好以后，在main.js注入多語言vue-i18n依賴。

import i18n from '../utils/locale'
// ···
new Vue({
  store,
  router,
  i18n,
  render: h => h(App)
})

 

最后,接着就可以在vue頁面中使用了,在這里我們只講$t的使用。

<template>
　　<section>　　
  　　<h3>{{$t("handsome")}}</h3>
  　　<el-button @click="changeLanguage('en')">English</el-button>
  　　<el-button @click="changeLanguage('zh')">中文</el-button>
　　</section>
</template>
...
import { setup } from "../utils/locales";
// methods
changeLanguage(lang) {
  　this.$i18n.locale = lang
　　setup(lang);
　　location.reload() // 為了重新實例化vue-router對象，避免一些bug
}

擴展，具體請轉到https://hachijiang.github.io/vue-i18n%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/

基本方法：

• $t：普通詞
• $tc：單復數
• $te：check 翻譯key是否存在
• $d：時間日期
• $n：貨幣數字

自定義指令：v-t

高階：

• linked locale messages
• <i18n></i18n>：組件塊的拼接與復用

 

二、到這里還沒結束呢， 要怎么結合element ui 呢?

我們都知道,element ui有它自帶的一套國際化配置。像日期控件、分頁控件等，不會隨着vue-i18n的配置改變而改變，換句話說，以上的代碼，是不能夠切換element ui內部控件的語言類型。

嗯，那么問題來了，怎么在切換語言的時候同時切換element ui 內部的控件呢？？？

別急，我們還是來到剛才的那段代碼中，添加一些神秘的代碼，就可以切換了。

好了，20秒已經過去了，代碼已經寫好了。客官請看粗大...啊呸！加粗加大部分！

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 引入element ui自帶語言包 import ElementUILocale 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 DEFAULT_LANG = 'en'
const LOCALE_KEY = 'DemoLanguage'

const locales = {
    zh: require('./zh.json'),
    en: require('./en.json')
}

const i18n = new VueI18n({
    locale: DEFAULT_LANG,
    messages : locales,
})

const UIlocales = { zh: zhLocale, en: enLocale } 
// 通過判斷lang語言標志符來return先對應的語言 const setUIlocales = lang =>{ switch (lang) { case 'zh': return UIlocales.zh case 'en': return UIlocales.en } }

export const setup = lang => {
    if(lang == undefined){
        lang = window.localStorage.getItem(LOCALE_KEY)
        if ( locales[lang] == undefined ) {
            lang = DEFAULT_LANG
        }
    }
    window.localStorage.setItem(LOCALE_KEY, lang)
    Object.keys(locales).forEach(item => {
        document.body.classList.remove('lang-${item}')
    })
    document.body.classList.add('lang-${lang}')
    document.body.setAttribute('lang', lang)

    Vue.config.lang = lang
    i18n.locale = lang
    ElementUILocale.use(setUIlocales(lang)) // element ui 切換語言
}

setup()
export default i18n

哈哈哈，是不是很簡單啊！現在快去試試看切換語言后分頁或者時間等其他控件是否有change呢！！！

 

三、怎么結合vue-router呢?

看到這個問題之后，你肯定會有疑問!之前不是已經配置好了嗎，一個路由，不寫個$t('xxx')就OK了?這還能難道聰明的我？？？跟下圖一樣：

router.js文件

// ×××錯誤寫法
export const constantRouterMap = [
  { 
　　path: '/home',
　　name: this.$t('home')
　　component: () => import('@/views/home/index),
　　hidden: true 
  }
]

如果覺得自己胸有成竹，請你把代碼按照這個寫法寫，不出錯要什么我都不給你！！！哈哈哈！

對的，肯定報錯的，vue-i18n和vue-router屬於同級，你怎么去用呢？？？

哈哈哈，仔細思考一下，既然$t('key')這種寫法不對，那么，我們還能想到什么呢？？？給你三分鍾思考的時間！！！

滴~滴~滴~老司機說三小時都過去了，你想出來了嗎？？？

對！！！這個key才是你要翻譯的name，為何糾結於一定用$t('key')這種行不通的法子捏？

既然方法不重要，key重要,那么我們就把$t拿掉，留下key。

export const constantRouterMap = [
  { 
　　path: '/home',
　　name: 'home'
　　component: () => import('@/views/home/index),
　　hidden: true 
  }
]

zh.json

{
  "home":"我的主頁"  
}

en.json

{
  "home":"My Home"  
}

這樣的話，我們只要在渲染的時候把相應的name用$t('name')來切換就可以了。關注加粗的部分就行了！

<div>
　　<template v-for="item in routes" v-if="!item.hidden&&item.children">
  　　<el-submenu v-if="hasChildren(item)" :index="item.name||item.path" :key="item.name">
    　　<template slot="title">
      　　<span class="router_border"></span>
      　　<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
      　　<span v-if="item.name" slot="title">{{$t(item.name)}}</span>
    　　</template>
  　　</el-submenu>
　　</template>
</div

到這就結束了！！！新的一天，也請繼續加油吧！！！