国际化背景
当项目需要面向全球用户时，国际化（i18n）改造便成为了一个必要的步骤。选择合适的国际化插件工具，基于项目的技术栈，是成功的关键。下面，我们将以Vue 3结合Element Plus和ECharts为例，详细阐述如何实现快速有效的国际化。
需要考虑的关键问题
1. 文案翻译
- 挑战：项目中所有需要显示的文案都需要被提取出来，并进行翻译。同时，对于第三方插件（如
day.js、ECharts、Element Plus等）的国际化处理也需单独进行。 - 策略：使用专业的翻译工具或团队来确保文案翻译的准确性和一致性。对于第三方插件，查阅其官方文档，了解如何集成其国际化功能。
2. 样式问题
- 挑战：由于不同语言的长度差异，可能会导致页面布局和样式错乱。
- 策略：在设计页面时，考虑使用流式布局（如Flexbox或Grid）来适应不同长度的文本。对于固定宽度的元素，可以使用
min-content或max-content等CSS属性来防止样式错乱。
3. 时间成本
- 挑战：国际化是一个耗时的过程，通常需要一周以上的时间，具体时间取决于项目的页面数量和复杂度。
- 策略：在项目初期就规划好国际化工作，并将其作为项目的一部分。利用自动化工具（如提取翻译字符串的脚本）来减少手动工作，提高效率。
国际化实战指南
Vue 插件安装和基本代码配置
使用 vue-i18n 插件，它是 Vue 3 官方推荐的国际化插件，支持多语言切换。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
1. 安装插件
bash
npm install vue-i18n --save
2. 添加多语言配置文件
在 src 目录下创建 locales 目录，并添加以下文件：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
bash
└── src
└── locales
├── index.ts
├── zh-cn.json
└── en-us.json
index.ts：
typescript
import elEnLocale from 'element-plus/es/locale/lang/en';
import elZhLocale from 'element-plus/es/locale/lang/zh-cn';
import zh from './zh-cn.json';
import en from './en-us.json';
import { createI18n } from 'vue-i18n';
const messages = {
'en-us': {
...en,
...elEnLocale,
},
'zh-cn': {
...zh,
...elZhLocale,
},
};
const curSysName = localStorage.getItem('curSysName');
const localeStr = localStorage.getItem(curSysName) || 'zh-cn';
const i18n = createI18n({
legacy: false,
locale: localeStr, // 设置当前语言
fallbackLocale: 'en-us', // 设置回退语言
globalInjection: true, // 全局注册 $t 方法
messages,
});
export default i18n;
zh-cn.json和en-us.json：用于存储中文和英文的翻译内容，具体内容将在后续生成。
3. 修改 main.ts（或 main.js）文件
typescript
import { createApp } from 'vue';
import App from './App.vue';
// 其他必要的引入...
import i18n from './locales/index';
const app = createApp(App);
app.use(i18n);
// 其他插件的注册...
app.mount('#app');
4. app.vue 文件修改
在 app.vue 文件中，你需要引入 useI18n 并在 RouterView 外层添加 el-config-provider，并绑定 messages[locale] 以实现 Element Plus 组件库的国际化。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
vue
<script setup lang="ts">
import { RouterView } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { locale, messages } = useI18n();
</script>
<template>
<el-config-provider :locale="messages[locale]">
<div class="main">
<RouterView />
</div>
</el-config-provider>
</template>
<style>
/* 在这里添加全局样式，如果需要 */
</style>
注意：由于 el-config-provider 并不是 Element Plus 官方组件，这里假设它是一个自定义的包装组件，用于接收国际化信息。在实际中，Element Plus 使用了 ElConfigProvider 组件来实现国际化，但通常不需要在 app.vue 中显式添加它，因为 vue-i18n 插件已经处理了 Vue 组件的国际化。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
多语言切换功能
1. 系统内部切换
在页面中添加一个按钮，点击按钮切换语言。切换语言时，将当前语言保存到本地（如 localStorage），然后可以通过编程式导航（如 router.push）或页面刷新来更新语言。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
2. 系统外切换
- 如果从接口取到多语言参数，可以在路由守卫中处理这些参数，保存到本地，并刷新页面。
- 如果从 URL 的查询参数中取到语言设置，可以在路由守卫或页面加载时处理这些参数。
vscode 快速开发工具插件
vue-swift-i18n 插件是一个强大的工具，它可以快速提取页面中的文本并生成多语言配置文件，同时支持自动替换。这大大减少了国际化过程中的工作量。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
- 详情请看 vue-swift-i18n
CSS 不同语言样式处理
样式局部设置
可以使用 CSS 的 :lang() 伪类选择器来为不同语言的文本设置不同的样式。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
css
.item3:lang(zh) {
width: 8%;
}
.item3:lang(en) {
width: 20%;
}
但请注意，:lang() 伪类选择器通常用于选择具有特定 lang 属性的元素，而不是用于选择不同语言文本下的元素。因此，你可能需要为需要样式变化的文本元素添加相应的 lang 属性。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
echarts 样式处理
对于 echarts 的样式处理，你可以使用 echarts 提供的配置项和事件来处理与国际化相关的样式问题。如果你需要根据不同语言调整图表的某些样式，可以考虑在初始化图表时根据当前语言设置不同的配置项。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
英文翻译过长的处理方案：tooltip 组件
对于英文翻译过长导致的 tooltip 组件显示问题，你可以采取以下策略：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16169.html
- 显示英文缩写或
...，鼠标移入以后显示完整内容。这可以通过工具提示（tooltip）的formatter函数实现，根据文本长度动态调整显示内容。 - 考虑使用更简洁的英文表达或缩写来减少文本长度。
评论