当前位置： 首页 > java >正文

Vue2存量项目国际化改造踩坑

java 2025/9/2 5:30:50

Vue2存量项目国际化改造踩坑

一、背景

在各类业务场景中，国际化作为非常重要的一部分已经有非常多成熟的方案，但对于一些存量项目则存在非常的改造成本，本文将分享一个的Vue2项目国际化改造方案，通过自定义Webpack插件自动提取中文文本，大大提升改造效率。

二、核心思路

通过开放自定义Webpack插件，利用AST（抽象语法树）分析技术，自动扫描Vue组件中的中文文本

  1. 模板中的中文：插值表达式、文本节点、属性值
  2. 脚本中的中文：字符串字面量、模板字符串
  3. 国际化动态注入：通过插件动态替换原中文片段
  4. 自动生成语言包：输出标准的i18n语言文件

技术栈

  • vue-template-compiler：解析Vue单文件组件
  • @babel/parser：解析JavaScript代码为AST
  • @babel/traverse：遍历AST节点
  • Webpack Plugin API：集成到构建流程

三、插件实现

1.插件基础结构

class MatureChineseExtractorPlugin {constructor(options = {}) {this.options = {outputPath: './i18n',includePatterns: [/src\/.*\.(vue|js|jsx|ts|tsx)$/, '/src/App.vue'],excludePatterns: [/node_modules/,/dist/,/i18n/,/plugins/,/public/,/webpack\.config\.js/,/package\.json/,],methodPrefix: '$smartT',keyPrefix: '',...options,};// 解析结构this.extractedTexts = new Map();// 文件统计this.fileStats = {totalFiles: 0,processedFiles: 0,extractedCount: 0,injectedFiles: 0,skippedFiles: 0,};}/*** 插件入口文件* @param {*} compiler*/apply(compiler) {// 插件主流程}// 插件核心方法// ......
}

2. AST语法树抽取

  apply(compiler) {compiler.hooks.done.tap('MatureChineseExtractorPlugin', (stats) => {const projectRoot = compiler.context;const filePath = path.resolve(projectRoot, './src/App.vue');// 解析Vue组件const content = fs.readFileSync(filePath, 'utf-8');const component = parseComponent(content);// 解析模版AST语法树const templateAst = compile(component.template.content, {preserveWhitespace: false,whitespace: 'condense',});this.traverseTemplateAST(templateAst.ast, filePath);// 解析Script语法树const scriptAst = parse(component.script.content, {sourceType: 'module',plugins: ['jsx', 'typescript', 'decorators-legacy', 'classProperties'],});this.traverseScriptAst(scriptAst, filePath);// 替换代码注入this.injectReplaceCodes();// 输出结果this.outputResults();});}

3.Vue Template AST解析

 /*** 模版AST语法树处理* @param {AST节点} node*/traverseTemplateAST(node, filePath) {if (!node) return;// 处理元素节点的属性if (node.type === 1) {// 处理静态属性if (node.attrsList) {node.attrsList.forEach((attr) => {if (attr.value && this.containsChinese(attr.value)) {this.addExtractedText(attr.value, filePath, `template-attr-${attr.name}`, {line: node.start || 0,column: 0,});}});}// 处理动态属性if (node.attrs) {node.attrs.forEach((attr) => {if (attr.value && this.containsChinese(attr.value)) {this.addExtractedText(attr.value, filePath, `template-dynamic-attr-${attr.name}`, {line: 0,column: 0,});}});}}// 处理{{}}表达式节点if (node.type === 2 && node.expression) {// 检查表达式中是否包含中文字符串const chineseMatches =node.expression.match(/'([^']*[\u4e00-\u9fa5][^']*)'/g) ||node.expression.match(/"([^"]*[\u4e00-\u9fa5][^"]*)"/g) ||node.expression.match(/`([^`]*[\u4e00-\u9fa5][^`]*)`/g);if (chineseMatches) {chineseMatches.forEach((match) => {// 去掉引号const text = match.slice(1, -1);if (this.containsChinese(text)) {this.addExtractedText(text, filePath, 'template-expression', {line: node.start || 0,column: 0,});}});}// 处理模板字符串中的中文if (node.expression.includes('`') && this.containsChinese(node.expression)) {// 简单提取模板字符串中的中文部分const templateStringMatch = node.expression.match(/`([^`]*)`/);if (templateStringMatch) {const templateContent = templateStringMatch[1];// 提取非变量部分的中文const chineseParts = templateContent.split('${').map((part) => {return part.split('}')[part.includes('}') ? 1 : 0];}).filter((part) => part && this.containsChinese(part));chineseParts.forEach((part) => {this.addExtractedText(part, filePath, 'template-string', {line: node.start || 0,column: 0,});});}}}// 处理文本节点if (node.type === 3 && node.text) {const text = node.text.trim();if (this.containsChinese(text)) {this.addExtractedText(text,filePath,'template-expression',{line: node.start || 0,column: 0,},{oldText: text,newText: `{{${this.options.methodPrefix}('${text}')}}`,});}}// 递归处理子节点if (node.children) {node.children.forEach((child) => {this.traverseTemplateAST(child, filePath);});}}

4. Vue Script AST解析

/*** 脚本AST语法树处理* @param {*} astTree* @param {*} filePath*/traverseScriptAst(astTree, filePath) {traverse(astTree, {// 捕获所有字符串字面量中的中文StringLiteral: (path) => {const value = path.node.value;if (this.containsChinese(value)) {this.addExtractedText(value, filePath, 'script-string', {line: path.node.loc ? path.node.loc.start.line : 0,column: path.node.loc ? path.node.loc.start.column : 0,});}},// 捕获模板字符串中的中文TemplateLiteral: (path) => {path.node.quasis.forEach((quasi) => {if (quasi.value.raw && this.containsChinese(quasi.value.raw)) {this.addExtractedText(quasi.value.raw, filePath, 'script-template', {line: quasi.loc ? quasi.loc.start.line : 0,column: quasi.loc ? quasi.loc.start.column : 0,});}});},});}

5. 代码替换(最小化案例)

  /*** 注入替换代码片段*/injectReplaceCodes() {// 对所有文件分组const injectionMap = new Map();this.extractedTexts.forEach((extractedText) => {const { filePath } = extractedText;if (injectionMap.has(filePath)) {injectionMap.get(filePath).push(extractedText);} else {injectionMap.set(filePath, [extractedText]);}});// 处理每个文件[...injectionMap.keys()].forEach((filePath) => {let content = fs.readFileSync(filePath, 'utf-8');const extractedTextList = injectionMap.get(filePath);for (const extractedText of extractedTextList) {const { text, replaceConfig } = extractedText;// 在遍历AST树时，请自行处理if (replaceConfig) {content = content.replace(replaceConfig.oldText, `${replaceConfig.newText}`);} }fs.writeFileSync(filePath, content, 'utf-8');});}

6. 语言包生成

 /*** 输出结果*/outputResults() {const results = Array.from(this.extractedTexts.values());console.log(results);// 生成中文映射文件const chineseMap = {};results.forEach((item) => {chineseMap[item.text] = item.text;});const entries = Object.entries(chineseMap);// 写入JSON文件const outputFile = path.join(this.options.outputPath, 'extracted-chinese.json');fs.writeFileSync(outputFile, JSON.stringify(chineseMap, null, 2), 'utf-8');// 生成对象属性字符串const properties = entries.map(([key, value]) => {// 转义特殊字符const escapedValue = value.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r');return `  '${key}': '${escapedValue}'`;}).join(',\n');// 生成zh.js文件const zhJsPath = path.join(this.options.outputPath, 'zh.js');fs.writeFileSync(zhJsPath,`// 自动生成的中文语言包
// 生成时间: ${new Date().toLocaleString()}
// 共提取 ${entries.length} 个中文片段export default {
${properties}
};`,'utf-8');console.log(`提取完成，共提取 ${results.length} 个中文片段`);console.log(`结果已保存到: ${outputFile}`);}

7. 其它辅助方法

 /*** 添加提取的文本*/addExtractedText(text, filePath, type, location) {this.extractedTexts.set(text, {text,filePath,type,location,});this.fileStats.extractedCount++;}/*** 检查是否包含中文*/containsChinese(text) {return /[\u4e00-\u9fa5]/.test(text);}

四、使用方式

1. Webpack配置

// webpack.config.extract.js
const MatureChineseExtractorPlugin = require('./MatureChineseExtractorPlugin');module.exports = {// ... 其他配置plugins: [new MatureChineseExtractorPlugin({outputPath: './i18n',verbose: true})]
};

2. 运行配置

package.json(script)

"extract": "webpack --config webpack.config.extract.js  --mode development "

运行

npm run extract

3. 项目案例

<template><div id="app"><header class="header"><h1>{{ '欢迎使用Vue2国际化演示' }}</h1><p>{{ '这是一个完整的国际化解决方案演示项目' }}</p></header><nav class="nav"><button @click="currentView = 'home'" :class="{ active: currentView === 'home' }">{{ '首页' }}</button><button @click="currentView = 'user'" :class="{ active: currentView === 'user' }">{{ '用户管理' }}</button><button @click="currentView = 'product'" :class="{ active: currentView === 'product' }">{{ '商品管理' }}</button></nav><main class="main"><div class="status-bar"><span>当前页面：{{ currentComponent }}</span><span>{{ userInfo.name }}，欢迎使用系统</span><span>今天是{{ currentDate }}，祝您工作愉快</span></div><component :is="currentComponent"></component></main><footer class="footer"><p>{{ '版权所有 © 2024 Vue2国际化演示项目' }}</p></footer></div>
</template><script>
import HomePage from './components/HomePage.vue';
import UserManagement from './components/UserManagement.vue';
import ProductManagement from './components/ProductManagement.vue';export default {name: 'App',components: {HomePage,UserManagement,ProductManagement,},data() {return {currentView: 'home',userInfo: {name: '张三',},currentDate: new Date().toLocaleDateString(),};},methods: {sayHello() {console.log('你好，这是一个Vue2国际化改造案例~');},},computed: {currentComponent() {const components = {home: '首页',user: '用户管理',product: '商品管理',};return components[this.currentView];},},
};
</script>

4. 提取结果

i18n/
└──zh.js                    # 中文语言包// 自动生成的中文语言包
// 生成时间: 2025/9/1 11:38:04
// 共提取 12 个中文片段export default {'欢迎使用Vue2国际化演示': '欢迎使用Vue2国际化演示','这是一个完整的国际化解决方案演示项目': '这是一个完整的国际化解决方案演示项目','首页': '首页','用户管理': '用户管理','商品管理': '商品管理','当前页面：': '当前页面：','，欢迎使用系统': '，欢迎使用系统','今天是': '今天是','，祝您工作愉快': '，祝您工作愉快','版权所有 © 2024 Vue2国际化演示项目': '版权所有 © 2024 Vue2国际化演示项目','张三': '张三','你好，这是一个Vue2国际化改造案例~': '你好，这是一个Vue2国际化改造案例~'
};

五、总结

通过自定义Webpack插件的方式，我们成功实现了Vue2项目中文文本的自动提取，大大提升了国际化改造的效率。这种基于AST分析的方案不仅准确率高，而且可以灵活扩展，是大型项目国际化改造的理想选择，而且不仅针对Vue几乎所有的webpack项目都可以用类似的方案再结合i8n，进行国际化改造~

http://www.xdnf.cn/news/19512.html

相关文章：

  • Ansible变量的定义与使用
  • 安卓11 12系统修改定制化_____常用的几种修改固件 实现指定 “运行内存” 显示
  • 【lucene】 中的impactsenum与impactsdisi有啥区别？
  • 拥抱智能高效翻译 ——8 款视频翻译工具深度测评
  • (附源码）留言系统的设计与实现
  • 标定分享3--lidar与rtk/ins标定外参工程实现分享
  • 变频器实习总结14 电子元件中的内部参考电压 Type-c口对于BMS开发的优点
  • Synchronized 概述
  • 平衡二叉树（一）
  • 2016考研数学（二）真题
  • sunset: noontide靶场
  • AlphaFold 2 本地部署与安装教程（Linux）
  • 高速CANFD通讯接口芯片ASM1042性能分析与5Mbps多节点测验
  • 包的相对导入
  • MPI-NCCL-TEST 训练自检，基础通信和可用的机器
  • 《Bishop PRML》10.1 (3) 理解VAE KL loss
  • 【贪心算法】day5
  • PPO、DPO和GRPO的区别
  • Python实现BP神经网络
  • 利用美团longcat.ai编写的C语言支持指定压缩算法通用ZIP压缩程序
  • 硬件工程师成长之路：从入门到精通的技术旅程
  • 科学研究系统性思维的方法体系：研究设计相关模版
  • go 开发环境配置 air + dlv debug 踩坑之旅
  • Linux shell 脚本基础 003
  • C6.7:输入电阻的负载效应及其CE负反馈放大器
  • android-studio 安装
  • Mysql中事务隔离级别有哪些？
  • Java实习：MySQL篇（黑马JavaWeb课程）
  • 简单的加密算法
  • PostgreSQL表膨胀的危害与解决方案