前言

Hi~大家好，今天给大家介绍一个关于国际化的vite插件 vite-plugin-auto-i18n ，一个自动翻译的关于i18n的vite插件。

做过国际化的朋友都知道，国际化通常都是用 i18n 手动去项目中替换对应的文字，然后在项目里维护一个国际化配置map实现的，这种方式非常低效，一个大型项目可能要测试产品一起工作几个星期才行。有没有什么办法可以无需更改业务代码又能自动生成翻译呢？

答案是有的，就是这个基于谷歌翻译api和babel的自动翻译插件————vite-plugin-auto-i18n

注：插件基于babel去解析页面中的目标字符，然后统一翻译，翻译结束之后会生成一个json的配置文件，如果认为谷歌翻译不准确，就可以通过修改json文件的内容更换翻译内容。而且翻译的key是基于hash算法生成类似对称加密，相同的字符key都是一样的，所以不会反复翻译。同时翻译是统一收集字符之后再组装翻译文本，翻译之后然后切割翻译内容写入json配置，不用担心发出大量翻译请求。

感兴趣的朋友希望可以跑一下demo，跑完就知道这个工具的强大了

介绍

基于谷歌翻译api的vite自动翻译插件。

支持框架：Vue2、Vue3、React

支持文件类型：js, ts, jsx, tsx, vue

插件中文readme：vite-plugin-auto-i18n - npmGitDownloads

特点：

• 一键翻译
• 无需改动业务代码
• 支持新增语言自动补全配置
• 支持翻译多国语言

使用

安装

npm i vite-plugin-auto-i18n -D # yarn add vite-plugin-auto-i18n -D

演示

演示图对应业务源码 (部分）

可以看到通过这个插件，无需改动业务源码即可完成国际化

选项

解释buildToDist：

在vite环境中执行插件后会生成翻译配置文件。但是如果您直接构建它，项目会先生成翻译配置文件。但翻译配置文件不会立即打包到主包中，您可能需要再次打包。

因此，提供了buildToDist选项，当创建翻译配置文件时，它将主动将翻译配置文件打包进主包，缺陷是您的打包文件可能有两份翻译配置文件

配置

Vue

vite.config.js 配置

import { defineConfig } from 'vite'
import vuePluginsAutoI18n from "vite-plugin-auto-i18n";
import createVuePlugin from '@vitejs/plugin-vue';

// 注：vite-plugin-auto-i18n 只处理脚本文件因此对于.vue等类型文件，需要vuePlugin进行解析
const vuePlugin = createVuePlugin({
    include: [/\.vue$/],
    // 注：plugin-vue 对于静态节点默认不解析，因此这里需要下述配置
    template: {
        compilerOptions: {
            hoistStatic: false,
            cacheHandlers: false,
        }
    } 
})

export default defineConfig({
    plugins: [
        vuePlugin,
        vuePluginsAutoI18n({
            option:{
                globalPath: './lang', // 配置文件生成位置
                namespace: 'lang', // 命名空间
                targetLangList: ['en', 'ko', 'ja'], // 翻译目标语言
                originLang: 'zh-cn', // 翻译源语言
                distPath: './dist/assets', // 打包后生成文件位置
                distKey: 'index', // 打包后主文件名称
            }
        }),
      ]
});

语言引用文件（lang.js）

配置完 vite.config.js 之后还需要创建一个文件用于引入翻译的语言，命名为lang.js
代码如下：

import '../../lang/index'
import CN from '../../lang/zh-cn/index.mjs'
import EN from '../../lang/en/index.mjs'
import KO from '../../lang/ko/index.mjs'
import JA from '../../lang/ja/index.mjs'
const langMap = {
    zhcn: window?.lang?.zhcn || CN,
    en: window?.lang?.en || EN,
    ko: window?.lang?.ko || KO,
    ja: window?.lang?.ja || JA,
}
const lang = window.localStorage.getItem('lang') || 'zhcn'
window.$t.locale(langMap[lang], 'lang')

lang.js 代码解释：

import '{{指向globalPath，就是lang文件夹的位置}}/index' // 默认会生成一个index文件，用于更换语言
import CN from '{{指向globalPath，就是lang文件夹的位置}}/{{ 源语言的key，以上面为例子就是zh-cn }/index.mjs'
// 这里只演示了targetLangList长度为零的情况，如果有多种语言就继续往下加
import EN from '{{指向globalPath，就是lang文件夹的位置}}/{{ 目标语言列表的项，这里就是第0项，就是‘en’ }}/index.mjs' // 下同
import KO from '../../lang/ko/index.mjs'
import JA from '../../lang/ja/index.mjs'
const langMap = {
    {{ 源语言的key }}: window?.{{ 你的命名空间 }}?.{{ 源语言的key }} || CN
    {{ 目标语言列表的项，这里就是第0项，就是‘en’ }}: window?.{{ 你的命名空间 }}?.{{ 目标语言列表的项，这里就是第0项，就是‘en’ } || EN, 
    // 下同
    ko: window?.lang?.ko || KO,
    ja: window?.lang?.ja || JA,
}
// 通过window.localStorage.getItem('lang') 存储当前语言类型
const lang = window.localStorage.getItem({{ 你的命名空间 }}) || {{ 默认显示的语言，这里填 源语言的key 或者 目标语言列表的项 }}(defualt lang)
window.{{ 你的翻译函数，默认使用的翻译函数是 $t }}.locale(langMap[lang], {{ 你的命名空间 }})

项目入口文件

最后在项目入口文件引入 lang.js 即可。
main.js

import './lang' // lang.js 必须在第一行引入

像这样配置即可：

demo项目

到这里基础配置就完成了，直接运行就可以触发自动国际化了。
注： 由于这里通过谷歌翻译api进行翻译因此需要挂梯子才能翻译成功。

切换语言

项目运行起来后，通过更换 localStorage 对应命名空间的key进行切换语言

// 如 localStorage.setItem({{ 你的命名空间 }}, {{ 源语言的key 或者 目标语言列表的项 }})
localStorage.setItem('lang', 'en);
// 重新加载页面
window.location.reload()

机制介绍

• vite-plugin-auto-i18n通过解析js文件去抽离需要翻译的文本，因此使用vite-plugin-auto-i18n之前需要调用相关插件比如vueplugin，将特殊格式的文件转成js类型的文件
• vite-plugin-auto-i18n插件运行完之后会创建一个文件夹，里面会有一个json文件，格式化json之后就可以看到不同语言的翻译，如果对某个语言翻译不认同，更改json文件即可，插件的翻译均以json文件为主。
• json文件中会看到hash值，hash是基于翻译文本自动生成，类似对称加密，所以只要翻译文本没变，这个hash就不会变。
• vite-plugin-auto-i18n有翻译补全机制，目标类型语言如果出现缺失，会以源语言的翻译配置为准将缺失的语言补齐，可以放心的在配置中增加新语言类型

总结

vite-plugin-auto-i18n是一个全自动的国际化插件，可以一键翻译多国语言，同时不会影响项目的业务代码，对于国际化场景是一个很强大的工具，有类似场景的朋友不妨尝试下vite-plugin-auto-i18n。

原文链接：https://juejin.cn/post/7301516165384929318