前端自动翻译插件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，仅生成多语言文件的结构框架（保留原文），需手动填充翻译内容。适用于以下场景：

1. 需要完全自定义翻译内容。
2. 项目敏感，禁止调用外部翻译 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 文件​

1. 打开生成的 index.json 或各语言文件。
2. 在对应字段的目标语言中填写翻译内容（如 "en": "Login"）。

​方式2：通过 Excel 管理（推荐）​​

1. 导出为 Excel ：使用脚本将 index.json 转为 Excel（表头为 KEY, NAME, Translation），便于非技术人员协作。
2. 导入回 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');
        // 获取第一个 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