Element-plus配置国际化
国际化 | Element Plus
网站全局国际化
安装 vue-i18n
pnpm i vue-i18n
创建中英文语言包,也就是项目中用到的国际化名称。
src\language\en.ts
export default {
message: {
home: 'home',
mine: 'mine',
},
}
src\language\zh.ts
export default {
message: {
home: '首页',
mine: '个人中心',
},
}
配置中英文语言包
src\language\i18n.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
const i18n = createI18n({
locale: 'en',
// 如果高版本报错,设置这个属性
legacy: false,
messages: {
zh,
en,
},
})
export default i18n
在 main.ts 中进行全局注册
src\main.ts
import i18n from '@/language/i18n'
app.use(i18n)
在App.vue 中进行使用 vue-18n。
src\App.vue
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const { locale: localeLanguage, t } = useI18n()
const locale: any = ref(zhCn)
const chaneLang = (language: any) => {
// elementUI 国际化
locale.value = language
// 网站国际化
localeLanguage.value = language.name
}
</script>
<template>
<el-config-provider :locale="locale">
<button @click="chaneLang(zhCn)">中文</button>
<button @click="chaneLang(en)">英文</button>
<router-link to="/home">{{ t('message.home') }}</router-link>
<router-link to="/mine">{{ t('message.mine') }}</router-link>
<router-view></router-view>
</el-config-provider>
</template>
参考文章: