前端自动翻译插件webpack-auto-i18n-plugin的使用
一个 前端自动翻译插件,支持所有编译成 JS 的前端框架(例如 Vue2/3 和 React)。无需修改源码,通过支持多种翻译服务,一键轻松实现多语言支持!默认集成有道翻译和谷歌翻译,同时支持自定义翻译器,兼容 Webpack、Vite、Rollup 等主流构建工具。
本文章只做 空翻译器 EmptyTranslator
(只需要扫描目标语言,不进行翻译),主要作为使用记录心得
主要就两个事:1、通过脚本将本地多语言文件内容生成到xlsx,2、把已经翻译好的xlsx文件内容导入到本地的多语言文件
注意注意注意:确保项目已升级至 Webpack 5(插件仅支持 Webpack 5)可查看 升级到webpack5的那篇文章
一、EmptyTranslator
的作用
EmptyTranslator
是 webpack-auto-i18n-plugin
内置的虚拟翻译器,不依赖第三方翻译 API,仅生成多语言文件的结构框架(保留原文),需手动填充翻译内容。适用于以下场景:
- 需要完全自定义翻译内容。
- 项目敏感,禁止调用外部翻译 API。
二、配置 webpack-auto-i18n-plugin
1.安装插件
npm install webpack-auto-i18n-plugin --save-dev
2.修改 Webpack 配置
在 vue.config.js
中集成插件
const WebpackAutoI18nPlugin = require('webpack-auto-i18n-plugin');
const { EmptyTranslator } = require('webpack-auto-i18n-plugin');module.exports = {configureWebpack: {plugins: [new WebpackAutoI18nPlugin({targetLangList: ['en'], // 目标语言列表translator: new EmptyTranslator(), // 使用空翻译器outputPath: './src/lang', // 语言文件输出目录originLang: 'zh', // 源语言(保留原文)distPath: './dist/lang', // 构建后语言文件路径(可选)distKey: 'index' // 生成的主文件名(默认index.json)})]}
};
3.入口文件引入
在 main.js
顶部添加语言包引入:
import './lang/index'; // 插件自动生成的文件
4.语言切换逻辑
插件默认通过 localStorage
管理语言,切换示例:
window.localStorage.setItem('lang', 'en');
window.location.reload();
三、手动填充翻译的两种方式
方式1:直接编辑 JSON 文件
- 打开生成的
index.json
或各语言文件。 - 在对应字段的目标语言中填写翻译内容(如
"en": "Login"
)。
方式2:通过 Excel 管理(推荐)
- 导出为 Excel:使用脚本将
index.json
转为 Excel(表头为KEY, NAME, Translation
),便于非技术人员协作。 - 导入回 JSON:通过脚本将编辑后的 Excel 内容合并回
index.json
(覆盖)
1.更目录文件下 新建jsonToExcel.js和excelToJson.js(vue.config.js同一级别)
npm install exceljs --save
生成 Excel 文件(脚本1)
jsonToExcel.js文件
const ExcelJS = require('exceljs');
const fs = require('fs');fs.readFile('./lang/index.json', 'utf-8', async (err, data) => {if (err) throw err;const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1');// 设置列宽worksheet.columns = [{ header: 'KEY', width: 12 },{ header: 'Name', width: 100 },{ header: 'Translation', width: 150 }];// 添加数据并设置样式const json = JSON.parse(data);Object.entries(json).forEach(([key, translations]) => {const row = worksheet.addRow([key, translations['zh-cn'], translations['en']]);row.alignment = { vertical: 'middle' };row.height = 25;});await workbook.xlsx.writeFile('./translation.xlsx');console.log('读取成功,已保存到./translation.xlsx');});
Excel 回 JSON(脚本2)
excelToJson.js
const ExcelJS = require('exceljs');
const fs = require('fs');function getCellText(cell) {if (!cell || cell.value == null) return '';if (typeof cell.value === 'object' && cell.value.richText) {// 拼接富文本里的纯文字return cell.value.richText.map(rt => rt.text).join('');}return cell.value.toString();
}async function excelToNestedJson() {const workbook = new ExcelJS.Workbook();try {// 读取 Excel 文件await workbook.xlsx.readFile('./translation.xlsx');// 获取第一个 worksheetconst worksheet = workbook.getWorksheet(1);// 转换为 JSON 数据const result = {};worksheet.eachRow((row, rowNumber) => {if (rowNumber === 1) return;let key = getCellText(row.getCell(1));if (!result[key]) {result[key] = {};}result[key]['zh-cn'] = getCellText(row.getCell(2));result[key]['en'] = getCellText(row.getCell(3));});return result;} catch (error) {return null;}
}// 执行转换
(async () => {const jsonResult = await excelToNestedJson();if (!jsonResult) {console.log('未找到翻译文件:translation.xlsx 或文件读取失败');} else {// 写入 JSON 文件fs.writeFileSync('./lang/index.json', JSON.stringify(jsonResult, null, 2));console.log('翻译文件转换成功,已保存到 ./lang/index.json');}
})();
packsge.json 脚本配置
"scripts": {"readExcel": "node excelToJson.js","readJson": "node jsonToExcel.js"},
四、实现原理
通过脚本将多语言 JSON 文件(如 index.json
)与 Excel 文件(.xlsx
)相互转换,利用 Excel 的易编辑性手动填充翻译内容,再同步回 JSON 文件。
核心流程:
index.json
→ 生成 Excel → 手动编辑 Excel → 合并回 index.json