vue3.0 vue-cli4+element-plus 按需加载组件并配置 vue-i18n 9.0 国际化多语言

版本

"element-plus": "^1.0.2-beta.31",
"vue": "^3.0.5",
"vue-i18n": "^9.0.0-rc.4",

目录结构

src/lang/index.js 文件

import { createI18n } from 'vue-i18n'
import elementlangEn from 'element-plus/lib/locale/lang/en'
import elementlangZhCn from 'element-plus/lib/locale/lang/zh-cn'
import localeLangEn from './en'
import localeLangZhCn from './zh-cn'

const messages = {
    'zh-cn': {
        ...localeLangZhCn,
        ...elementlangZhCn,
    },
    'en': {
        ...localeLangEn,
        ...elementlangEn,
    }
}

const i18n = createI18n({
    locale: window.localStorage.getItem('lang') || 'zh-cn',
    messages
})

export default i18n

src/main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { ElButton, ElImage, ElCarousel, ElCarouselItem, ElRow, ElCol, ElLink, ElTabs, ElTabPane, ElDivider, ElPagination, ElInput, ElSelect, ElOption } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import ElementLocale from 'element-plus/lib/locale'
import i18n from './lang'

ElementLocale.i18n((key, value) => i18n.global.t(key, value))

const app = createApp(App)
    .component(ElButton.name, ElButton)
    .component(ElImage.name, ElImage)
    .component(ElCarousel.name, ElCarousel)
    .component(ElCarouselItem.name, ElCarouselItem)
    .component(ElRow.name, ElRow)
    .component(ElCol.name, ElCol)
    .component(ElLink.name, ElLink)
    .component(ElTabs.name, ElTabs)
    .component(ElTabPane.name, ElTabPane)
    .component(ElDivider.name, ElDivider)
    .component(ElPagination.name, ElPagination)
    .component(ElInput.name, ElInput)
    .component(ElSelect.name, ElSelect)
    .component(ElOption.name, ElOption)
    .use(router)
    .use(i18n)
    .mount('#app')

export default app

最后

在需要国际化的文字使用 $t() 获取，例如：

<router-link to="/">{{ $t("header.home") }}</router-link>

改变 this.$i18n.locale 的值就可以切换语言了，例如：

// 切换为英文
this.$i18n.locale = 'en'

或者

// 切换为英文
window.localStorage.setItem('lang', 'en')
window.location.reload()