Vue3 + TS + Element Plus + i18n：i18n 的使用 / 国际化

一、本文目标

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 国际化） - 简书

elementplus国际化源码分析 element ui国际化切换_blueice的技术博客_51CTO博客

【i18n】i18n的使用方式-CSDN博客