一、本文目标
Vue 3 + Element Plus 项目中使用 vue-i18n 进行国际化处理
二、安装依赖
pnpm install vue-i18n
三、配置 vue-i18n
创建一个 utils/lang/index.js 文件来配置你的国际化插件
// utils/lang/index.js
import { createI18n } from 'vue-i18n';
// 引入语言文件
const messages = {
en: {
welcome: 'Welcome',
// ... 其他英文翻译
// 你可以在这里添加 Element Plus 的翻译
'el.table.emptyText': 'No Data',
// ...
},
zh: {
welcome: '欢迎',
// ... 其他中文翻译
'el.table.emptyText': '暂无数据',
// ...
},
// 你可以继续添加其他语言的翻译
};
const i18n = createI18n({
locale: 'en', // 设置默认语言
fallbackLocale: 'en', // 设置后备语言（当指定语言不存在时）
messages, // 设置翻译信息
});
export default i18n;
或，这里 messages 引入了 外部文件
// utils/lang/index.js
// lang => language
import { createI18n } from 'vue-i18n'
import zhLocale from 'element-plus/es/locale/lang/zh-CN'
import enLocale from 'element-plus/es/locale/lang/en';
import jaLocale from 'element-plus/es/locale/lang/ja';
import koLocale from 'element-plus/es/locale/lang/ko';
const i18n = createI18n({
legacy: false, // 使用CompotitionAPI必须添加这条.
// locale: localStorage('lang') || 'zh', // set locale设置默认值
locale: 'zh', // set locale设置默认值
fallbackLocale: 'en', // set fallback locale
messages: {
'zh-CN': zhLocale,
'en': enLocale,
'ja': jaLocale,
'ko': koLocale,
},
missing(e){
console.log('20--', e)
}
})
export default i18n
四、在 Vue main.ts 中使用 i18n
在 Vue 应用中使用 i18n 和 Element Plus
在你的 main.js 文件中，引入并使用 utils/lang/index.js 和 ElementPlus
import { createApp, getCurrentInstance } from 'vue'
import './style.css'
import '@v3/assets/styles/tailwind.css'
import '@v3/assets/styles/reset.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import router from './routers/index'
import { api } from './api/index'
import 'vue-global-api'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import _ from 'lodash'
import HelloWorld from '@v3/components/HelloWorld.vue'
import MIconfont from '@v3/components/m-iconfont/index.vue'
import i18n from '@v3/utils/lang/index'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.component('hello-world', HelloWorld) // 全局组件
app.component('m-iconfont', MIconfont) // 全局组件 iconfont
app.use(pinia)
app.use(router)
app.use(i18n)
app.config.globalProperties.$api = api
app.config.globalProperties.$lodash = _
app.mount('#app')
五、在组件中使用翻译
现在，可以在你的 Vue 组件中使用 $t 函数来访问翻译字符串
<template>
<div>
<el-button>{{ $t('welcome') }}</el-button>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<!-- 如果表格为空，显示翻译后的 "暂无数据" -->
<template v-slot:empty>
<div>{{ $t('el.table.emptyText') }}</div>
</template>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 这里应该包含你的表格数据
};
},
};
</script>
测试成功
六、注意
如果你想让 Element Plus 的国际化更加自动化，你可能需要编写一个脚本来自动生成或更新这些翻译字符串，但这通常超出了基本设置的范畴
七、欢迎交流指正
八、参考链接
vue3 实现语言切换（vue-i18n + element-plus 国际化） - 简书
vue3-element-plus中vue-i18n插件的配置与使用_elementplus i18n-CSDN博客
引入elementplus的语言国际化后怎么使用_mob6454cc74e2cb的技术博客_51CTO博客
vue3 实现语言切换（vue-i18n + element-plus 国际化） - 简书