vue2 + vue-i18n实现国际化

前言

element官方文档写的明明白白兼容@5，不兼容@6，需要自己配置，但是在配置过程中，还是遇到蛮多的坑。

文件具体配置

安装vue-i18n插件

cnpm i -S vue-i18n@6.x.x

src/lang/index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
// element官方插件
import eleLocal from 'element-ui/lib/locale'; // 兼容除vue-i18n@5版本以为的版本
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import zh from "./zh.js";
import en from "./en.js";

Vue.use(VueI18n)

const messages = {
    'en': {
        message: 'hello',
        ...en,
        ...enLocale
    },
    'zh': {
        message: '你好',
        ...zh,
        ...zhLocale
    }
}

const i18n = new VueI18n({
    silentFallbackWarn: true,
    locale: 'en', // set locale
    messages // set locale messages
});

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

export default i18n

src/lang/zh.js

const zh = {
    "common": {
        'loginTitle': '系统登录',
        'loginBtn': '登 录'
    }
}

export default zh

在main.js中引用

// 设置国际化
import i18n from './lang/index'

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

倘若遇到如下报错

Uncaught TypeError: Cannot read properties of undefined (reading 'install')/(reading '0')

// 版本问题，目前我所用的是@6版本，最新版本@9/@8会出现警告，需要在vite中配置resolve

在组件中使用

// login.vue
switchLangHandle(value) {
    this.$i18n.locale = value
}