vue國際化-vue-i18n的配置

一、前提基礎

• 對vue.js、vuex等有基本的瞭解
• element國際化配置

二、安裝依賴

npm i -S element-ui vue-i18n js-cookie
複製代碼

• 安裝js-cookie是爲了將當前選擇的語言保存並在下一次打開時默認選擇。

三、代碼分析

• 準備本地的翻譯信息，在src下新建lang文件夾，新建文件zh.js，en.js。

zh.js
export default {
  common: {
    confirm: '肯定',
    cancel: '取消',
    home: '首頁'
  },
  login: {
    login: '登陸',
    logout: '退出'
  },
  header: {
    message: '這是公共的頭部組件'
  },
  footer: {
    message: '這是公共的底部組件'
  }
}

en.js
export default {
  common: {
    confirm: 'confirm',
    cancel: 'cancel',
    home: 'home'
  },
  header: {
    message: 'this is a common header component'
  },
  footer: {
    message: 'this is a common footer component'
  },
  login: {
    login: 'login',
    logout: 'logout'
  }
}
複製代碼

• 建立VueI18n實例，使用建立的翻譯信息，在lang文件下新建index.js文件

import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}
const i18n = new VueI18n({
  locale: 'zh',
  messages
})
export default i18n
複製代碼

• 在 main.js 中引入 vue-i18n，並掛在在vue實例中。

import Vue from 'vue'
import i18n from './lang'
Vue.use(i18n)

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 便於能夠直接在組件中經過this.$i18n使用，也能夠按需引用
  render: h => h(App)
})
複製代碼

4. 開始使用，新建.vue文件。在頁面中經過$t()方法使用。

<template>
  <div class="common_header">
    <el-row>
      <el-col :span="12">
        {{$t('header.message')}}
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="login">{{$t('login.login')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
複製代碼

因爲咱們VueI18n中定義的是中文，這是頁面顯示的'這是公共的頭部組件'，login: '登陸'，修該VueI18n實例屬性locale的值爲en，刷新頁面，頁面顯示 'this is a common header component'，'login',說明多語言配置成功。

四、代碼優化

問題一

• 到這裏還存在一些問題，如今咱們都是手動的修改VueI18n實例屬性locale的值爲en/zh來實現語言的切換。

1. 在頁面中加入切換語言的控件：

<el-select v-model="language" placeholder="請選擇語言" @change="changeLanguage">
  <el-option
    v-for="item in languageOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
複製代碼

2. 加入一個選擇語言的下拉框，修改locale的值爲選擇的語言。

changeLanguage (language) {
  this.$i18n.locale = language
}
複製代碼

切換語言時，頁面將自動完成語言類型的切換。

問題二

• 刷新頁面以後初始化，將還原爲默認值。

1. 將language信息保存在cookie（以前已經安裝了js-cookie）。初始化從cookie中獲取。

const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', 
  messages
})

切換語言時候保存到Cookies

Cookies.set('language', language)
複製代碼

這是再去刷新頁面，將會採用最後咱們保存在cookie中的語言。

問題三

• 切換語言的控件沒有變。

  

1. 爲了方便使用，切換時能夠在vuex中保存language信息

changeLanguage (v) {
  this.$store.dispatch('switchLanguage', v)
  this.$i18n.locale = v
}

在state中：
language: Cookies.get('language') || 'zh'
複製代碼

2. 根據當前的語言類型動態的計算。

languageOptions () {
  let languageOptions
  if (this.$store.state.language === 'zh') {
    languageOptions = [
      {
        value: 'zh',
        label: '中文'
      },
      {
        value: 'en',
        label: '英文'
      }
    ]
  } else {
    languageOptions = [
      {
        value: 'zh',
        label: 'Chinese'
      },
      {
        value: 'en',
        label: 'English'
      }
    ]
  }
  return languageOptions
}
複製代碼

效果以下：

問題四

• 到這裏已經差很少完成了，其實還有個問題。就是若是使用了element-ui，element組件沒法實現多語言的頁面。這裏還涉及到手動處理 vue-i18n@6.x 兼容性問題，官網已經作了詳細介紹。

1. 引用element的語言包

import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
複製代碼

2. 添加到翻譯信息

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
複製代碼

3. 兼容vue-i18n@6.x，修改main.js

Vue.use(i18n)
修改成
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
複製代碼

4. 頁面效果以下：

   

   

五、總結

1. 到這裏關於vue-i18n的使用以及介紹完了。
2. 幾個關鍵點在於實現locale的自動切換、如何使語言信息（$t()方法）、element-ui組件的多語言實現、兼容性等。