中英文切換功能，筆者是通過i8n實現的。本文講述了各個場景下的中英文如何替換，包括表單驗證，提示信息，各中組件等。

• 安裝i18n

// 通過淘寶鏡像安裝
cnpm install vue-i18n --save

• 引入i18n

目錄結構

1. 在src目錄下創建i18n文件夾，新增i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
//import messages from './langs'

//自定義中英文包
import zh from './langs/zh'
import en from './langs/en'

//element 中英文包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)

const messages = {
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)
}
//從localStorage中拿到用戶的語言選擇，如果沒有，那默認中文。
/*const i18n = new VueI18n({
    locale: localStorage.lang || 'zh',
    messages,
})*/
const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //為了實現element插件的多語言切換
console.log('%c當前緩存語言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
export default i18n

2. 在i18n文件夾下創建lang語言包，并創建zh.js和en.js

zh.js

const cn = {
  //菜單名字
  menuName:{
    //首頁
    home: '首頁',
    product1: '產品1',
    product2: '產品2',
    contact: '聯系我們',
    signin: '登陸',
    signup: '注冊',
  }
}

export default cn;

en.js

const en = {
  //菜單名字
  menuName:{
    //首頁
    home: 'home',
    product1: 'product1',
    product2: 'product2',
    contact: 'contact',
    signin: 'signin',
    signup: 'signup',
  }
}

export default en;

3. 在main.js中引入i18n

//中英文切換
import i18n from './i18n/i18n'


new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: '<App/>'
})

• 實現中英文切換

1. 在組件中定義切換事件，用戶點擊了切換按鈕后，將localStorage存儲的當前語言更新。

  //切換語言
  toggleLang(lang) {
    // loading遮罩
    const loading = this.$loading({
      lock: true,
      text: this.$t("element.loadingText"),
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    setTimeout(function(){
      loading.close();
    },600)
    if(lang == 'zh') {//中文
      localStorage.setItem('locale', 'zh')
      this.$i18n.locale = localStorage.getItem('locale')
    } else if(lang == 'en') {//英文
      localStorage.setItem('locale', 'en')
      this.$i18n.locale = localStorage.getItem('locale')
    }
  }

• 實現效果

實現效果

• 表單驗證

有時候在表單驗證的提示信息中，也要實現中英文切換，如果直接在rules數據定義時使用$t()數據，在中英文切換后，不會實時更新。此時就是要監控當前語言是否變化，如果變化了，重新賦值表單驗證數據。

1. 定義setFormRules方法

 //設置表單校驗
  setFormRules: function(){
    this.rules = {
      email: [
        {required: true, message: this.$t('userForm.emailRule'), trigger: 'blur'},
        {type: 'email', message: this.$t('userForm.emailCheckRule') , trigger: 'blur'},
        {min: 3, max: 50, message: this.$t('userForm.emailCheckRule'), trigger: 'blur'}
      ],
      password: [
        {required: true, message: this.$t('userForm.passwordRule'), trigger: 'blur'},
      ],
      vrifyCode: [
        {required: true, message: this.$t('signInRules.vrifyCodeRule') , trigger: 'blur,change'},
        {min: 4, max: 4, message: this.$t('signInRules.vrifyCodeCheckRule'), trigger: 'blur'}
      ],
    }
  }

2. 組件mounted時調用setFormRules方法

 mounted: function(){
          this.setFormRules();
        }

3. 語言切換后調用setFormRules方法

 watch: {
          //監聽語言切換
          '$i18n.locale' : function () {
            this.setFormRules();
          },
        }

4. 其它的數據類似

• 總結

本文總結了實現中英文切換基本步驟，以及實現表單驗證提示信息的動態切換。基本可以滿足大部分場景的使用。