vue-i18n 和 element-ui 國際化

vue-i18n 和 element-ui 國際化

基於vue 的項目國際化可以使用 vue-i18n 插件來實現。element-ui 自身已有國際化的實現，且可以通過修改 i18n 方法兼容其他國際化插件。

資料

• vue-i18n 文檔
• element-ui 國際化文檔：

vue-i18n 構建

在 vue 項目的 src 目錄構建如下 i18n 目錄。

|___ src
     |___ i18n
          |___ lang
          |    |___ cn.js
          |    |___ en.js
          |    |___ index.js
          |___ index.js

引入 vue-i18n 並創建 i18n 實例。

// i18n/index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './lang';

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'cn',
  messages
});

export default i18n;

根據實際情況，創建自己的語言包。

// i18n/lang/index.js
import en from './en';
import cn from './cn';

const messages = {
  en,
  cn
};
export default messages;

// i18n/lang/en.js
const en = {
  message: {
    hello: 'hello, world'
  }
};

export default en;

// i18n/lang/cn.js
const cn = {
  message: {
    hello: '你好，世界'
  }
};

export default cn;

在 main.js 掛載 i18n 實例。

// main.js
import i18n from './i18n';

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

vue-i18n 使用

頁面使用方式如下：

<p v-html="$t('message.hello')"></p>

更多使用方式可查看文檔。

要改變語言，可以在實例化時傳入 locale 選項，或者改變實例的 locale 屬性。

const i18n = new VueI18n({
  locale: 'cn',
  // ...
});

i18n.locale = 'en';

element-ui 兼容

在上面構建的語言包中引入 element-ui 的語言包，進行合併。

// i18n/lang/index.js
import en from './en';
import cn from './cn';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

const messages = {
  en: {
    ...en,
    ...enLocale
  },
  cn: {
    ...cn,
    ...zhLocale
  }
};
export default messages;

改寫 element-ui 的 i18n 方法。

// i18n/index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './lang';
import ElementLocale from 'element-ui/lib/locale';

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'cn',
  messages
});
ElementLocale.i18n((key, value) => i18n.t(key, value));

export default i18n;

完成上面步驟後，i18n 只要更改了語言，element-ui 也會跟着更改。