elementplus i18n

### Element Plus 国际化 i18n 实现方法 #### 安装依赖 为了在 Vue 3 和 TypeScript 环境中使用 `vue-i18n`，需要先安装必要的包： ```bash pnpm install vue-i18n @intlify/vite-plugin-vue-i18n ``` 对于特定版本的需求，可以采用如下命令来确保兼容性[^2]。 #### 创建多语言文件 创建一个多语言资源文件夹 `src/locales` 并在其内部定义不同语言的消息对象。例如，中文消息文件 `zh.ts` 及英文消息文件 `en.ts` 如下所示： ```typescript // src/locales/zh.ts export default { message: { hello: '你好' } } // src/locales/en.ts export default { message: { hello: 'hello' } } ``` #### 初始化 i18n 插件 通过引入上述的语言包并初始化 `i18n` 对象，在项目的入口文件（通常是 main.ts 或者类似的启动脚本）里完成设置: ```typescript import { createApp } from 'vue'; import App from './App.vue'; // 导入 i18n 库及其插件 import { createI18n } from 'vue-i18n'; import zhLocale from '@element-plus/locale/lib/zh-cn'; // 引入 element plus 的本地化支持 import enLocale from '@element-plus/locale/lib/en'; import messagesZh from '@/locales/zh'; import messagesEn from '@/locales/en'; const app = createApp(App); // 配置 i18n const i18n = createI18n({ legacy: false, // 如果不希望使用旧版 API，则设为 false globalInjection: true, locale: navigator.language === 'zh-CN' ? 'zh' : 'en', // 默认语言 fallbackLocale: 'en', messages: { zh: {...messagesZh.message,...zhLocale}, en: {...messagesEn.message,...enLocale} }, }); app.use(i18n); app.mount('#app'); ``` 这段代码不仅设置了应用程序级别的翻译信息，还集成了来自 Element Plus 组件库本身的本地化字符串[^4]。 #### 动态切换语言 为了让用户能够在运行时更改界面显示的语言，可以通过修改当前的 `locale` 属性实现这一点。下面是一个简单的例子展示如何根据用户的偏好调整整个应用的语言环境： ```html <template> <div id="app"> <!-- 切换按钮 --> <button @click="toggleLang">Toggle Language</button> <!-- 使用 $t 函数获取对应语种的文字 --> <p>{{ $t('message.hello') }}</p> <!-- 将组件包裹于 ConfigProvider 中以便其子节点继承配置 --> <el-config-provider :locale="currentElLocale"> <router-view /> </el-config-provider> </div> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import { useI18n } from 'vue-i18n'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; import en from 'element-plus/es/locale/lang/en'; const { locale } = useI18n(); // 计算属性用于返回合适的 Element UI 语言包 const currentElLocale = computed(() => (locale.value === 'zh' ? zhCn : en)); function toggleLang() { locale.value = locale.value === 'zh' ? 'en' : 'zh'; } </script> ``` 此模板展示了如何利用 `<el-config-provider>` 来传递给定的 `locale` 参数到所有的后代组件，并允许它们自动适应新的语言设定。