解決vue國際化問題——i18n的使用(iview)

問題：對於需要支持國際化的項目，可以通過引入vue-i18n包的方式配置解決

1、npm安裝

npm install vue-i18n --save

成功后可以在package.json文件中看到已添加了vue-i18n：

"vue-i18n": "^8.11.2"

下面為兼容vue-i18n@6.x+及更高版本的配置介紹。

2、在src資源文件下創建文件夾i18n，i18n下創建index.js文件，引入VueI18N,配置i18n，並導入語言包(根據開發需求添加語言)

import Vue from "vue";
import { getBrowserLang, getCookieLang } from "@utils/storage";
//引入vue-i18n
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
//引入iview自帶的組件語言js包
import en from 'iview/dist/locale/en-US'
import zh from 'iview/dist/locale/zh-CN'
//引入本地自己創建的中英文js語言包(注意路徑改為自己的本地js路徑)
import cnLocale from "../../public/custom/js/zh";
import enLocale from "../../public/custom/js/en";
//配置i18n
Vue.locale = () => {}

// 獲取當前語言（初始化,首先從cookie里獲取,localStorage里沒有存語言，默認為瀏覽器當前的語言）
let cookieLang = getCookieLang();
cookieLang = cookieLang === "en" || cookieLang === "us" ? "en_US" : cookieLang;
const lang = cookieLang || getBrowserLang();

//配置i8n
Vue.locale = () => {};
//注冊vue-i18n實例i18n，並引入語言文件
const i18n = new VueI18n({
  locale: lang,		//這里的locale對應的是當前的語言標識。
  messages: {
    zh_CN: Object.assign(cnLocale, zh),
    en_US: Object.assign(enLocale, en),
    //如果不需要引入iview的語言組件包，也可寫成
    //zh_CN:cnLocale,
    //en_US:enLocale,
  }
});

export default i18n;

3、在main.js文件中：

把 i18n 掛載到 vue 根實例上

import i18n from "./i18n";

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

4、根據2中語言包引入的路徑，在相對應的文件下(此處為public/custom/js/zh.js和en.js)新建語言文件包：en.js和zh.js，並在文件里根據需求編寫語言提示語並拋出。（注：兩者字段命名需相同）

//zh.js中：
const zh = {
  asec: {
    title: "標題",
    personalinfo: "個人資料",
    logout: "退出登錄",
    goback: "返回",
    loginpwd: "登錄密碼",
    emailbind: "郵箱綁定",
    phonebind: "手機號綁定",
  },
  baseModal: {
    okBtnText: "確定",
    cancelBtnText: "取消",
  }
}

export default zh;

//en.js中：
const en = {
  asec: {
    title: "title",
    personalinfo: "PersonInfo",
    logout: "sign out",
    goback: "go Back",
    loginpwd: "Login Password",
    emailbind: "Mailbox binding",
    phonebind: "Phone binding"
  },
  baseModal: {
    okBtnText: "Confirm",
    cancelBtnText: "Cancel",
  }
}

export default en;

5、中英文切換處理。

vue-i18n 提供了一個全局配置參數叫 “locale”，通過改變 locale 的值可以實現不同語種的切換

可通過以下代碼切換語言。lang代表語言標識。（可自己任意命名，eg：“en”，“zh”，“en_US”，“zh_CN”）

//可通過this.$i18n.locale = lang 設置當前語言

// 語言切換事件
changeLanguage(lang) {
  lang === "" ? "zh_CN" : lang;
  this.$i18n.locale = lang;
  // 使用 localStorage 存儲語言狀態
  localStorage.setItem('locale', this.$i18n.locale)
},

6、組件中使用

組件中使用時即可通過 $t() 的方式進行引用。

eg: $t('baseModal.okBtnText')

<span>{{$t("asec.title")}}</span>