一个 前端自动翻译插件，支持所有编译成 JS 的前端框架（例如 Vue2/3 和 React）。无需修改源码，通过支持多种翻译服务，一键轻松实现多语言支持！默认集成有道翻译和谷歌翻译，同时支持自定义翻译器，兼容 Webpack、Vite、Rollup 等主流构建工具。
本文章只做 空翻译器 EmptyTranslator（只需要扫描目标语言，不进行翻译），主要作为使用记录心得
主要就两个事：1、通过脚本将本地多语言文件内容生成到xlsx，2、把已经翻译好的xlsx文件内容导入到本地的多语言文件
注意注意注意：确保项目已升级至 Webpack 5（插件仅支持 Webpack 5）可查看 升级到webpack5的那篇文章
一、EmptyTranslator 的作用
EmptyTranslator 是 webpack-auto-i18n-plugin 内置的虚拟翻译器，不依赖第三方翻译 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 文件
方式2：通过 Excel 管理（推荐）
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');
// 获取第一个 worksheet
const 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
