vue+VueI18n 專案國際化 筆記

安裝

npm install vue-i18n
複製程式碼

語言資源

1. 建立一個lang資料夾
2. 建立相關語言的json檔案和一個配置index.js檔案 en.json

   {
       "zh":"中文",
        "ja":"日本語",
        "en":"English"
   }
   複製程式碼

   zh.json

   {
       "zh":"中文",
        "ja":"日本語",
        "en":"English"
   }
   複製程式碼

index.js 配置

引入vue 和vue-i18n

 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 Vue.use(VueI18n);
複製程式碼

匯入語言資源

var DEFAULT_LANG = 'zh';
var zh = require('./zh.json');
var en = require('./en.json');
var locales = {
 zh: zh,
 en: en
}
複製程式碼

建立vuei8n例項

var i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
})
複製程式碼

完整配置

1. 快取LOCALE_KEY，保留使用者語言習慣

2. 切換語言，更換整體樣式（確保不同語言的樣式相容）

3. element-ui元件國際化

main.js 引入 並掛在至vue例項中

import i18n from '../static/lang/index';

var app = new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
});
複製程式碼

專案中使用：

在html中，通過$t()使用

在js中 通過this.$i18n.t()使用

修改語言

this.$i18n.locale = 'zh';
複製程式碼