前言
在开发过程中如果涉及到国际化多语言处理，我们通常会在几个语言的json文件中改动/新增词条，这种情况下，语言不多的话改改没有什么问题，但是一旦要支持的语言多起来的话，管理起来十分痛苦，经常要在几个json文件中切来切去，甚至要翻译他们的对应词条，十分累赘。
不过如果你是有文案同学支持的话，那不成问题，体力活交给他们了，你就可以轻松进行开发，不用关注了。不巧的是我们没有，多语言文案都是靠我们开发来维护以及手动机翻 (- -!)，而且这种方式通常会因为某个疏忽某个语言的词条漏了或者没加。
于是乎就有了今天的插件诞生。
vite-plugin-i18n-dev
我的想法是将本地项目的多语言都集中起来，在同一个界面上进行更改并且引入翻译 API 同步翻译，只需要加一条，其他语言的词条同步翻译，不需要再次编辑以及翻译。
使用：
pnpm add -D vite-plugin-i18n-dev
# or use yarn
yarn add -D vite-plugin-i18n-dev
import { defineConfig } from 'vite'
import VitePluginI18nDev from 'vite-plugin-i18n-dev'
export default defineConfig({
base: './',
plugins: [
vue(),
VitePluginI18nDev({
dirs: [
{
name: 'global',
locales: {
zh: './src/locales/zh-CN.json',
en: './src/locales/en-US.json',
}
},
{
name: 'menu',
locales: {
zh: './src/locales/zh-CN.menu.json',
en: './src/locales/en-US.menu.json',
}
}
]
})
],
})
接着我们只需要打开本地的 xxx/__i18n__dev/ 的地址即可浏览到我们设置多语言文件的管理界面
功能说明
-
启用翻译 API
目前支持百度API 和有道API，在
vite.config.ts里面配置translate字段
这里需要注意的一点就是 locales 里面的 key 需要改成你使用的翻译api对应的语言code，以下是有道翻译对应的语言code
英文名 中文名 代码 Arabic 阿拉伯语 ar German 德语 de English 英语 en Spanish 西班牙语 es
VitePluginI18nDev({
translate: {
type: "youdao",
appid: "your appid",
secretKey: "your secretKey",
},
dirs: [/* your config dirs */],
}),
开启翻译配置后在更改/新增词条可以同步翻译其他语言词条
-
启用扁平化 Key 配置
假如你的多语言文件的 Key 是下方的 xxx.xxx 形式的话，需要开启
flatKey配置VitePluginI18nDev({ dirs: [ { name: "global", flatKey: true, // 开启扁平化 key 配置 locales: { zh: "./src/locales/zh-CN.json", en: "./src/locales/en-US.json", }, }, { name: "menu", locales: { zh: "./src/locales/zh-CN.menu.json", en: "./src/locales/en-US.menu.json", }, }, ], }),
插件原理解析
在 Vite 插件中开启一个客户端来展示界面，插件读取本地项目的json文件数据，然后将数据格式化处理成页面展示表格.
Vite 插件的 client 和 server 通信以及建立可参考上一遍文章：# 一文带你了解 Vite 插件编写
表格组件使用 surely-table 来展示，支持大量数据的展示，组件内置了虚拟列表以及多个功能，自己懒得写了所以直接用第三方组件。
在更改/添加/删除的操作从客户端发出，server 端接受到后根据第一次读取的 json 数据进行更改/添加/删除 最后写入到对应的语言文件里面。
结语
该插件算是解决了我目前所遇到的多语言开发问题，后续会继续进行优化，欢迎大家提出 issue 和 pr
后续计划：
- 支持 siliconflow 的翻译 api，这个可以免费进行翻译
- 优化添加交互
