国际化背景

当项目需要面向全球用户时，国际化（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 官方推荐的国际化插件，支持多语言切换。

1. 安装插件

npm install vue-i18n --save

2. 添加多语言配置文件

在 src 目录下创建 locales 目录，并添加以下文件：

└── src
    └── locales
         ├── index.ts
         ├── zh-cn.json
         └── en-us.json

• index.ts：

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）文件

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 组件库的国际化。

<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 组件的国际化。

多语言切换功能

1. 系统内部切换

在页面中添加一个按钮，点击按钮切换语言。切换语言时，将当前语言保存到本地（如 localStorage），然后可以通过编程式导航（如 router.push）或页面刷新来更新语言。

2. 系统外切换

• 如果从接口取到多语言参数，可以在路由守卫中处理这些参数，保存到本地，并刷新页面。
• 如果从 URL 的查询参数中取到语言设置，可以在路由守卫或页面加载时处理这些参数。

vscode 快速开发工具插件

vue-swift-i18n 插件是一个强大的工具，它可以快速提取页面中的文本并生成多语言配置文件，同时支持自动替换。这大大减少了国际化过程中的工作量。

• 详情请看 vue-swift-i18n

CSS 不同语言样式处理

样式局部设置

可以使用 CSS 的 :lang() 伪类选择器来为不同语言的文本设置不同的样式。

.item3:lang(zh) {
  width: 8%;
}

.item3:lang(en) {
  width: 20%;
}

但请注意，:lang() 伪类选择器通常用于选择具有特定 lang 属性的元素，而不是用于选择不同语言文本下的元素。因此，你可能需要为需要样式变化的文本元素添加相应的 lang 属性。

echarts 样式处理

对于 echarts 的样式处理，你可以使用 echarts 提供的配置项和事件来处理与国际化相关的样式问题。如果你需要根据不同语言调整图表的某些样式，可以考虑在初始化图表时根据当前语言设置不同的配置项。

英文翻译过长的处理方案：tooltip 组件

对于英文翻译过长导致的 tooltip 组件显示问题，你可以采取以下策略：

1. 显示英文缩写或 ...，鼠标移入以后显示完整内容。这可以通过工具提示（tooltip）的 formatter 函数实现，根据文本长度动态调整显示内容。
2. 考虑使用更简洁的英文表达或缩写来减少文本长度。