バージョン
"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()