当前位置: 首页 > news >正文

前端自动翻译插件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');// 获取第一个 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

http://www.dtcms.com/a/485747.html

相关文章:

  • 山东官方网站建设沧州网络推广渠成网络
  • 贺州网站建设公司家装设计需要学什么软件
  • 网站在百度上搜索不到丽水山耕品牌建设网站
  • 漂亮的门户网站dedecms游戏门户网站源码
  • thinkphp2.1网站挂文件国有企业投资建设项目
  • 网站首页的动态视频怎么做的建网站的流程和费用
  • 一些可以做翻译的网站微信小程序制作文档
  • 东莞公司网站开发首页制作教程
  • 河北大名网站建设招聘深圳网站设计首选柚米
  • 网站友链中英文外贸网站模版
  • html5企业网站模版经营一个网站要怎么做
  • 专业点网站制作公司龙泉市建设局网站
  • 网站设计资源seo优化网站的注意事项
  • 深圳网站运营托管163邮箱怎么申请企业邮箱
  • 孝感市门户网站传媒wordpress博客
  • 做网站推广的销售电话开场白wordpress注册邮箱怎么修改
  • 在哪公司建设网站东莞seo关键词搜索关键词
  • 万网虚拟服务器怎么做网站内容模板网站如何做优化
  • 网站底部关键词内链个人微信公众平台注册流程
  • 兰州seo网站排名高新西区网站建设
  • 山东济南网站开发移动商务网站开发课程
  • 哪家网站好中国企业500强最新排名2021
  • 好的网站推广什么网站可以做试卷
  • 网页设计与制作参考文献聊城关键词优化推广
  • 网站配色设计wordpress写作工具
  • 做网站价格表贵州贵州省住房和城乡建设厅网站
  • 西安网站建设培训市场推广
  • 温州做网站的如何查询网站的空间大小
  • 南通的电商网站建设网站开发方倍工作室
  • 常州网站建设专业的公司做视频网站需要多大带宽