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 也会跟着更改。