基于vue和webpack的前端国际化多语言转换方法及系统技术方案

本发明专利技术公开了一种基于vue和webpack的前端国际化多语言转换方法及系统，所示方法包括以下步骤：步骤S110，针对vue和webpack搭建的应用项目，首次使用时通过项目配置模块进行项目初始化配置；步骤S120，提取模块，抽取项目的中文，存入设定文件内配置的语言包存放目录内；步骤S130，翻译模块，读取步骤S120中提取的文件进行翻译，自动翻译并生成语言包；步骤S140，转化模块，在项目运行或打包过程中，自动转化中文为语言变量。本发明专利技术能够高效的提取项目中的中文，和准确的进行国际化翻译，实现新老项目的一键转化，高效的完成项目国际化。高效的完成项目国际化。高效的完成项目国际化。

【技术实现步骤摘要】
基于vue和webpack的前端国际化多语言转换方法及系统


[0001]本专利技术涉及国际化语言切换软件开发
尤其是涉及一种基于vue和webpack的前端国际化多语言转换方法及系统。

技术介绍

[0002]国际化语言切换是不少产品应用需要的一个功能，特别是对海外输出的应用，用户可以选择不同的语言进行切换使用，例如在中文、英文、泰文、日语等语言进行切换使用，这样就会涉及到语言的翻译，和语言包的维护。目前，针对vue和webpack搭建的应用项目，应用产品的开发人员，使用的是vue
‑
i18n插件，首先抽离项目中的中文，并将抽离的中文转换成语言变量，整理成一个zh.js文件将语言包注入i18n的对象中，通过local来控制当前页面显示的语言。而除中文外的语言包的内容，应用产品的开发人员，需要翻译中文后，录入项目内，而一个项目中文大多存在上千句中文词汇，需要花费大量的时间进行翻译工作（翻译软件：复制项目中文的中文，到翻译软件上翻译得到结果，并将翻译结果重新整理格式并录入语言包）。后续项目迭代需要人工比对本次新增需要翻译的中本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于vue和webpack的前端国际化多语言转换方法，其特征在于，所示方法包括以下步骤：步骤S110，针对vue和webpack搭建的应用项目，首次使用时通过项目配置模块进行项目初始化配置；根据开发者自己的开发习惯，配置语言包存放目录和需要翻译的语种，根据注册用户随机生成appid和密钥；步骤S120，提取模块，抽取项目的中文，存入设定文件内配置的语言包存放目录内；提取方式为：提取文件内的文本，并以正则匹配的方式，匹配文本中的存在的中文；每个中文生成一个唯一的文案ID，中文和文案ID形成一一对应关系，以文案ID为对象的键值，中文为对象的数据值，存至声明的JavaScript对象中，项目中的中文全部提取完成后，将得到JavaScript对象进行模块化转化，以文本的形式写入语言包存放目录下的zh.js文件内；步骤S130，翻译模块，读取步骤S120中提取的文件进行翻译，自动翻译并生成语言包；取zh.js文件的文本，以对象的转化数据格式，并将该对象的键值和数据值分别存于两个数组内，并将中文的数组拼接成字符串，进行翻译，将结果对象写入en.js和en.js.map文件内；步骤S140，转化模块，在项目运行或打包过程中，自动转化中文为语言变量。2.根据权利要求1所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤S110中，针对vue和webpack搭建的应用项目，进入项目根目录，在终端执行安装依赖的命令：npm i vue
‑
i18nnpm i webpack
‑
in
‑
loader
ꢀ‑‑
save
‑
dev安装完依赖和项目的配置后，执行webpack
‑
in
‑
loader的命令初始化配置；在终端执行初始化命令：npx i18n init这个过程，会读取webpack
‑
in
‑
loader包内的默认配置信息，并在执行的根目录生成i18n
‑
config.js文件。3.根据权利要求1所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤S120中，在终端执行以下命令：npx i18n generate开始遍历查找项目下的.vue和.js/.jsx/.ts/.tsx文件，匹配到文件中的中文文本后，存放至node内存的JavaScript对象中，对象的键值为中文 md5加密后的8
‑
24之前的自动，长度统一16位，记录为唯一的文案ID，对象的值为匹配到的中文，每个遍历的文件，都在控制台输出；将JavaScript对象的格式存入i18n
‑
config.js文件内配置的dir目录内，生成i18n
‑
config.js文件内配置的file文件，dir的值为./src/locale/，file的值为zh.js，如已存在zh.js文件，则进行覆盖操作。4.根据权利要求3所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤S120中，包括如下子步骤：步骤S210:先声明一个空对象，读取src目录下的所有.vue和.js文件，针对js文件，正则匹配.js文件的内容中包含中文的文案，将.js文件中的得到的中文依次生成文案ID，并
以文案ID作为空对象的键值，中文做为空对象的数据值，进行空对象的赋值操作；针对.vue文件，会使用正则匹配切割成两部分进行匹配中文，分别为template和script两部分；将.vue文件中的得到的中文依次生成文案ID，并以文案ID作为空对象的键值，中文做为空对象的数据值，进行空对象的赋值操作；步骤S220:从步骤S210中得到一个JavaScript对象，标记为result；步骤S230:读取i18n
‑
config.js配置项的dir和file文件属性得到目标文件/src/locale/zh.js，通过fs.existsSync()方法判断/src/locale/目录下zh.js文件是否存在；如存在返回true结果，如不存在返回false结果；步骤S240:在/src/locale/目录下新建zh.js空文件；步骤S250:拼接步骤S220中得到的结果，以编码格式，全量写入/src/locale/zh.js文件内。5.根据权利要求3所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤130中，包括以下子步骤：步骤S310：读取i18n
‑
config.js配置项的dir（./src/locale/）和zh.js文件属性得到目标文件/src/locale/zh.js，读取/src/locale/目录下的zh.js文...

【专利技术属性】
技术研发人员：胡金斌，王乐珩，张金银，
申请(专利权)人：杭州比智科技有限公司，
类型：发明
国别省市：