1、Vue+i18n+elementui报错如图:

2、原因:未兼容elementui

3、解决:兼容一下elementui

import eleLocale from 'element-ui/lib/locale';
eleLocale.i18n((key, value) => i18n.t(key, value));

4、完整代码:

多语言目录:

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import eleLocale from 'element-ui/lib/locale'; //兼容element

import customZhCn from './lang/zh-CN';
import customZhTw from './lang/zh-TW';
import customEnUs from './lang/en-US';

import zhCnLocale from 'element-ui/src/locale/lang/zh-CN';
import zhTwLocale from 'element-ui/src/locale/lang/zh-TW';
import enUsLocale from 'element-ui/src/locale/lang/en';

Vue.use(VueI18n);

let lang =  'zh-CN';  // navigator.language
Vue.config.lang = lang ;

Vue.locale = () => {};
const messages = {
    'zh-CN': Object.assign(zhCnLocale, customZhCn),
    'zh-TW': Object.assign(zhTwLocale, customZhTw),
    'en-US': Object.assign(enUsLocale, customEnUs),
};

const i18n = new VueI18n({
    locale: lang,
    messages,
    silentTranslationWarn: true
});

eleLocale.i18n((key, value) => i18n.t(key, value)) //兼容element

export default i18n;

main.js

……
import i18n from '@/locale';
……
export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐