CN115796190B

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

Info

Publication number: CN115796190B
Application number: CN202310033249.1A
Authority: CN
Inventors: 胡金斌; 王乐珩; 张金银
Original assignee: Hangzhou Bizhi Technology Co ltd
Current assignee: Hangzhou Bizhi Technology Co ltd
Priority date: 2023-01-10
Filing date: 2023-01-10
Publication date: 2023-05-16
Anticipated expiration: 2043-01-10
Also published as: CN115796190A

Abstract

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

Description

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

技术领域

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

背景技术

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

但这类方式仍有不足：一方面，针对产品应用的迭代和频繁的翻译文件，都是人力进行版本的归档，后续无法复盘哪些节点翻译了哪些文本，费时费力；另一方面，原有应用当中，原文（即中文）需要抽离出中文的语言包，和项目中中文转换成变量的形式注入，这无疑是一个巨大的工作量。因此，如何高效的提取项目中的中文，翻译对应国际化语言包，以及项目中的中文转换变量注入成为必须解决的技术问题。

发明内容

针对现有技术存在的问题，本发明的目的在于提供一种方法及系统，能够高效的提取项目中的中文，和准确的进行国际化翻译，实现新老项目的一键转化，高效的完成项目国际化的实现。

为实现上述目的，本发明提供一种基于vue和webpack的前端国际化多语言转换方法，所示方法包括以下步骤：

步骤S110，针对vue和webpack搭建的应用项目，首次使用时通过项目配置模块进行项目初始化配置；根据开发者自己的开发习惯，配置语言包存放目录和需要翻译的语种，根据注册用户随机生成appid和密钥；

步骤S120，提取模块，抽取项目的中文，存入设定文件内配置的语言包存放目录内；提取方式为：提取文件内的文本，并以正则匹配的方式，匹配文本中的存在的中文；每个中文生成一个唯一的文案ID，中文和文案ID形成一一对应关系，以文案ID为对象的键值，中文为对象的数据值，存至声明的JavaScript对象中，项目中的中文全部提取完成后，将得到JavaScript对象进行模块化转化，以文本的形式写入语言包存放目录下的zh.js文件内；

步骤S130，翻译模块，读取步骤S120中提取的文件进行翻译，自动翻译并生成语言包；取zh.js文件的文本，以对象的转化数据格式，并将该对象的键值和数据值分别存于两个数组内，并将中文的数组拼接成字符串，进行翻译，将结果对象写入en.js和en.js.map文件内；

步骤S140，转化模块，在项目运行或打包过程中，自动转化中文为语言变量。

进一步，在步骤S110中，针对vue和webpack搭建的应用项目，进入项目根目录，在终端执行安装依赖的命令：

npm i vue-i18n

npm i webpack-in-loader --save-dev

安装完依赖和项目的配置后，执行webpack-in-loader的命令初始化配置；

在终端执行初始化命令：

npx i18n init

这个过程，会读取webpack-in-loader包内的默认配置信息并在执行的根目录生成i18n-config.js文件。

进一步，在步骤S120中，在终端执行以下命令：

npx i18n generate

开始遍历查找项目下的.vue和.js/.jsx/.ts/.tsx文件，匹配到文件中的中文文本后，存放至node内存的JavaScript对象中，对象的键值为中文 md5加密后的8-24之前的自动，长度统一16位，记录为唯一的文案ID，对象的值为匹配到的中文，每个遍历的文件，都在控制台输出；

将JavaScript对象的格式存入i18n-config.js文件内配置的dir(./src/locale/)目录内，生成i18n-config.js文件内配置的zh.js文件，如已存在zh.js文件，则进行覆盖操作。

进一步，在步骤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（./src/locale/）和zh.js文件属性得到目标文件/src/locale/zh.js，通过fs.existsSync()方法判断/src/locale/目录下zh.js文件是否存在；如存在返回true结果，如不存在返回false结果；

步骤S240:在/src/locale/目录下新建zh.js空文件；

步骤S250:拼接步骤S220中得到的结果，以编码格式，全量写入/src/locale/zh.js文件内。

进一步，在步骤130中，包括以下子步骤：

步骤S310：读取i18n-config.js配置项的dir（./src/locale/）和zh.js文件属性得到目标文件/src/locale/zh.js，读取/src/locale/目录下的zh.js文件内容，得到一个JavaScript对象，记录为fromData；

步骤S320:读取i18n-config.js配置项的distLangs（[‘en’]），for循环遍历distLangs数组，判断对应语种的.js文件是否存在；若存在，在返回true结果，执行S321步骤，若不存在，返回false结果，执行S330步骤；

步骤S321:读取/src/locale/en.js文件的内容，得到JavaScript对象，记录为oldData，通过oldData得到已翻译数组对象，针对fromData做同样的操作，得到一个数组对象，记录为fromDataArray，过滤中文数组对象fromDataArray，判断数组key值是否包含在oldDataArray内；

步骤S322：声明空对象result和map，for循环fromDataArray数组，通过key取fromData内的中文，循环过程中将中文进行字符串的拼接，拼接后的字符串记录为query，循环过程中将使用的key值存在数组中，记录为keyList；将上述得到query进行翻译，翻译过程会自动读取i18n-config.js配置信息内的appId和secret；声明一个加盐值salt，const salt=(newDate).getTime();取当前时间作为随机数，进行签名加密前的字符串拼接，进行加密签名得到签名值sign，得到所有参数后调用翻译的api请求；调用翻译api完成后，清空query和keyList，并继续累加，达到1500字符串后，继续调用翻译api，将结果累加到result和map对象上，以次循环，直至fromDataArray循环完成，该语言翻译完成；

步骤S323:将S322得到结果result对原有的数据进行覆盖累加操作，读取/src/locale/目录下的en.js.map文件，将S322得到结果map对oldMap进行覆盖累加操作，得到合并后的result和map数据对象；

步骤330：读取/src/locale/zh.js文件的内容，得到JavaScript对象，记录为fromData，通过fromData得到需要翻译的全量中文数组对象；

步骤S340:新建空的en.js文件，并写入默认文本module.exports = {}，用于方便后续内容的写入。新建空的en.js.map文件，用于方便后续内容的写入。

步骤S350:将前置流程的reselt数据对象，拼接字符串，并覆盖写入/src/locale/目录下的en.js文件内，将前置流程的map数据对象，覆盖写入/src/locale/目录下的en.js.map文件内，完成en语言的翻译过程；若distLangs配置了多个语种，则会继续执行S320至S350流程依次输出其他语言的结果，直至所有语言全部翻译完成。

进一步，步骤S321中判断数组key值是否包含在oldDataArray内的判断方法如下：

const fromDataArray=Object.keys(fromData).filter(val=>{

return oldDataArray.indexOf(val)===-1

}。

进一步，步骤S322中，将中文进行字符串的拼接方式为const str1=appid+query+salt+key，变量为str1。

进一步，步骤140中，转化模块用于在项目运行或打包过程中，根据入口文件的文件引用，依次编译引用到的文件，编译过程如下:识别引用文件的文件后缀格式，如果是.vue和.js/.jsx/.ts/.tsx为后缀的文件，则将该文件的文本进行中文的正则匹配，并将匹配到的中文进行文案ID的转化，判断文案ID在语言包中是否存在，若存在，则将该文本转化为对应文案ID所映射的语言包变量；并交由下个loader继续编译转化；.vue文件由webpack-in-loader转化结束后，继续交由vue-loader编译，直至项目中引用的文件全部编译完。

进一步，判断文案ID在语言包中是否存在的方式为：读取zh.js的文本内容为JavaScript对象，将转化的文案ID放入中文的JavaScript对象中比对，判断该对象中是否有这个文案ID的键值。

另一方面，本发明提供一种基于vue和webpack的前端国际化多语言转换系统，所述系统用于实现根据本发明所述的方法。

本发明的有益效果在于：提取模块通过特定的提取方式抽取项目的中文，输入一段命令执行，即可实现项目中所有中文的提取，省去了开发者提取中文的过程，而且抽离的中文不需要转化语言变量，保留了项目中中文的可度性。能够高效的提取项目中的中文的同时，提供了准确的进行国际化多种语言的翻译，实现新老项目的一键转化，高效的完成项目国际化的实现。

附图说明

图1示出了根据本发明实施例中基于vue和webpack的前端国际化多语言转换方法流程示意图；

图2示出了图1中抽离项目中文的过程图；

图3示出了图1中自动翻译生成语言包的过程图。

具体实施方式

下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

以下结合图1-图3对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

本发明提供一种基于vue和webpack的前端国际化多语言转换方法及系统，通过命令行实现vue的前端应用中，中文的抽离和语言包的自动翻译，以及翻译内容的同步，并通过webpack-in-loader转化应用中文为语言包变量，实现应用多语种切换的功能。能够实现新老项目的一键转化，高效的完成项目国际化的实现。

vue-loader是一个Webpack的加载器，它可以将Vue组件（.vue文件）编译成普通的JavaScript模块。Webpack与vue-loader的组合，能够创建灵活和非常强大的工作流程来开发vue应用。Webpack是一个模块化打包工具，它被广泛地应用在前端领域的大多数项目中。利用Webpack不仅可以打包JS文件，还可以打包图片、CSS、字体等其他类型的资源文件。而支持打包非JS文件的特性是基于Loader机制来实现的。使用webpack来处理js代码，并且webpack会自动处理js之间的相关依赖。在实际项目中，不仅有js文件，还有css、图片、ES6转ES5、tpyescript转ES5，将less，scss转化css，将jsx、vue文件转换js文件。loader使得webpack能够去处理非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后可以利用webpack的打包能力，对它们进行处理。本质上，webpackloader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块。因为loader支持链式调用，链中的每个loader会处理之前已处理过的资源，最终变为js代码。顺序为相反的顺序执行，即上述执行方式为sass-loader、css-loader、style-loader。除此之外，loader的特性还有如下：

loader可以是同步的，也可以是异步的；

loader运行在Node.js中，并且能够执行任何操作；

除了常见的通过package.json的main来将一个npm模块导出为loader，还可以在module.rules中使用loader字段直接引用一个模块；

插件(plugin)可以为loader带来更多特性；

loader能够产生额外的任意文件；

可以通过loader的预处理函数，为JavaScript生态系统提供更多能力。可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和更多其他特性。

如图1所示，基于vue和webpack的前端国际化多语言转换方法的基本流程包括以下步骤：

步骤S110，项目配置模块针对vue和webpack搭建的应用项目，首次使用时需要进行项目初始化配置；

步骤S120，提取模块，抽取项目的中文，存入设定文件内配置的目录内；

步骤S130，翻译模块，读取步骤S120中提取文件进行翻译，自动翻译并生成语言包；

项目配置模块用于开放一个灵活配置的配置项，根据开发者自己的开发习惯，配置语言包存放目录，而appid和secret（密钥）根据注册用户随机生成，此处开发者可填写自己申请的appid和secret信息。不同项目想要实现的国际化的语种需求也不尽相同，distLangs（要翻译的语言）参数可根据开发者的语种需求，灵活配置。具体的，在步骤S110中，针对vue和webpack搭建的应用项目，进入项目根目录，在终端执行安装依赖的命令：

npm i vue-i18n

npm i webpack-in-loader --save-dev

安装完必要的依赖和项目的配置后，就可以执行webpack-loader的命令初始化配置了。

在终端执行初始化命令：

npx i18n init

这个过程，会读取webpack-in-loader包内的默认配置信息并在执行的根目录生成i18n-config.js文件内容如下：

module.exports = {

dir: "./src/locale/", // 目标目录

file: 'zh.js', // 翻译的文件

distLangs: ['en'], // 要翻译的语言

open: true, // leader是否启用默认true打包环境下不生效

appId:'', // 翻译appid

secret:'', // 翻译密钥

};

提取模块抽取项目的中文的方式如下：按名称排列的顺序，依次查找项目对应文件夹下内.vue和.js/.jsx/.ts/.tsx为后缀的文件进行提取中文，（查找规则：第一个文件夹内会查找至最深一层的文件夹，该文件夹即提取完成，若该文件夹内还包含多个文件夹，也是以名称的排列方式，依次查找。首个文件夹提取完成后，继续下个文件夹的深层提取，直至项目中所有文件全部提取完成。）提取方式：提取文件内的文本，并以正则匹配的方式，匹配文本中的存在的中文；每个中文生成一个唯一的文案ID，中文和文案ID形成一一对应关系，以文案ID为对象的键值，中文为对象的值，存至声明的JavaScript对象中，项目中的中文全部提取完成后，将得到JavaScript对象进行模块化得转化，以文本的形式写入/src/locale/(为配置项内dir配置的值)目录下的zh.js（为配置项内file配置的值，开发者可根据自己的开发习惯，配置目标目录）文件内。

相同的中文生成的文案ID相同，写入对象中，键值相同，会进行覆盖，起到了去重的作用。

这样的抽取项目的中文的优点在于输入一段命令执行，即可实现项目中所有中文的提取，省去了开发者提取中文的过程。而且抽离的中文不需要转化语言变量，保留了项目中中文的可度性。

步骤S120中，在终端执行以下命令：

npx i18n generate

开始遍历查找项目下的.vue和.js/.jsx/.ts/.tsx文件，匹配到文件中的中文文本后，存放至node内存的JavaScript对象中，对象的键值为中文 md5加密后的8-24之前的自动，长度统一16位，记录为唯一的文案ID，对象的值为匹配到的中文，每个遍历的文件，都在控制台输出。

进一步，将JavaScript对象的格式存入i18n-config.js文件内配置的dir(./src/locale/)目录内，生成i18n-config.js文件内配置的file(zh.js)文件，如已存在zh.js文件，则进行覆盖操作。

具体的，如图2所示，在步骤S120中，包括如下子步骤S210-S250：

步骤S210:先声明一个空对象，读取src目录下的所有.vue和.js文件，针对js文件，正则匹配(正则表达式/(['"`])(((!\1).)*[\u4e00-\u9fa5]+((!\1).)*)\1/gm).js文件的内容中包含中文的文案，将该.js文件中的得到的中文依次生成文案ID（相同的中文公用一个文案ID），并以文案ID作为空对象的键值，中文做为空对象的值，进行空对象的赋值操作。针对.vue文件，会使用正则匹配切割成两部分进行匹配中文，分别为template（template的正则表达式/(<template[^>]*>)((.|\n|\r)*)(<\/template>)/gim）和script（script的正则表达式/(<script[^>]*>)((.|\n|\r)*)(<\/script>)/gim）两部分。script部分和以上.js文件的处理方式相同，template部分使用三种正则匹配中文，分别为：1.匹配查找tag中的属性包含中文属性的部分（正则表达式：/(<[^\/\s]+)([^<>]+)(\/>)/gm）；2.匹配查找{{变量内包含中文的}}（正则表达式：/({{)([^}}]*[\u4e00-\u9fa5]+[^{{]*)(}})/gm）；3.匹配查找标签中内容包含中文的（正则表达式：/(>)([^><]*[\u4e00-\u9fa5]+[^><]*)(<)/gm）。

将该.vue文件中的得到的中文依次生成文案ID（相同的中文公用一个文案ID），并以文案ID作为空对象的键值，中文做为空对象的值，进行空对象的赋值操作。

步骤S220:从步骤S210中得到一个JavaScript对象({ "67a39834582ad99a":"暂无数据"，"823f3abe9e3ae504":"单位："})，标记为result。

步骤S230:读取i18n-config.js配置项的dir（./src/locale/）和file（zh.js）属性得到目标文件（/src/locale/zh.js），通过fs.existsSync()方法判断/src/locale/目录下zh.js文件是否存在。如存在返回true结果，如不存在返回false结果。

步骤S240:在/src/locale/目录下新建zh.js空文件。

步骤S250:拼接步骤S220中得到的结果(`module.exports=${JSON.stringify(result,null,'\t')};`)，以'utf8'的编码格式，全量写入/src/locale/zh.js文件内。

这一流程省去的人工抽离中文的过程，人工提取中文，会存在遗漏文件和大量时间人力投入。

具体地，步骤S120中，在终端执行以下命令：

npx i18n generate，这个过程会开始遍历查找项目下的.vue和.js/.jsx/.ts/.tsx文件，匹配到文件中的中文文本后，会存放至node内存的JavaScript对象中，对象的键值(key)生成方式为：将中文进行md5加密。

MD5消息摘要算法(MD5 Message-Digest Algorithm)，一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。）后会得到一个md5值（例：“暂无数据”进行md5加密后会转换成21efd88b67a39834582ad99aabb9dc60），并截取md5值后的8-24位字符，记录为唯一的文案ID（例：“暂无数据”生成的文案ID为67a39834582ad99a），对象的值(value)为匹配到的中文，每个遍历的文件，（多个文件内可以会存在同名中文，多个同名中文共用一个文案ID）都会在终端输出。

最后，会将JavaScript对象（key-value）的格式（例子："67a39834582ad99a":"暂无数据"）存入i18n-config.js文件内配置的dir(./src/locale/)目录内，生成i18n-config.js文件内配置的file(zh.js)文件，如已存在zh.js文件，则进行覆盖操作，这时，项目中所有所有需要转化多语言的中文已全部抓取到该文件中。

zh.js结构如下:

module.exports = {

"67a39834582ad99a": "暂无数据"，

"823f3abe9e3ae504": "单位："

（

生成方式：

const crypto=require('crypto');

String(crypto.createHash('md5').update(str).digest('hex'))..slice(8,24)

//进行md5加密后将得到的字符串切割8-24位处，统一key的长度，统一16位字符串，如："67a39834582ad99a":"暂无数据"，中的67a39834582ad99a

）

}。

翻译模块用于读取步骤S120中提取文件进行翻译，翻译的语种为开发者自行配置的[‘en’]（为配置项内dir配置的值），如配置了多个语种，会采用队列的方式翻译逐个翻译语种。

翻译过程具体如下：取zh.js文件的文本，以对象的转化数据格式（步骤S120以模块化格式写入，取出即为对象格式），并将该对象的键值（文案ID）和值（中文）分别存于两个数组内（数组的序列位置一一对应），并将中文的数组，以’\n’拼接成字符串（翻译以\n为分割来识别单词和句子，并将翻译结果已以数组的格式返回，排序方式和翻译前的相同，即文案ID数组和翻译结果的数组序列位置一一对应，然后将文案ID的数组和翻译结果数组分别为对象的键值（文案ID）和值重新组合成一个新对象，该对象为对应语种的内容，翻译结果数组自行拼接成.map的对象。）进行翻译，将结果对象写入en.js(.js文件需进行文本拼接，以模块化格式写入，方便项目中可以引用该语言包)和en.js.map文件内。

若项目处于版本迭代状态（即项目中已存在en.js和en.js.map，执行过提取模块后，会存在zh.js的文本行数多于en.js的情况），取zh.js文件和en.js文件的文本内容转为JavaScript对象，挨个删除中文对象的文案ID，删除的文案ID为英文对象的文案ID，删除完后的中文对象即为本次迭代新增的中文对象（对象的键值为新增的文案ID，值为本次迭代新增的中文），将本次迭代新增的中文对象进行翻译模块步骤后的结果，追加至原有的英文对象上（追加方式：给对象逐个增加键值（文案ID）和值（翻译的英文），.map的内容也以相同方式追加，键值为中文，值为翻译的英文），最后写入en.js和文件内。

此过程实现自动翻译后，并将结果自动整理成语言包所需的格式，使得语言包可以直接引入至项目中直接使用。针对项目迭代，高效处理增量的中文的翻译和比对工作。

如图3所示，在步骤130中包括以下子步骤S310-：

步骤S310：读取i18n-config.js配置项的dir（./src/locale/）和file（zh.js）属性得到目标文件（/src/locale/zh.js），读取/src/locale/目录下的zh.js文件内容，得到一个JavaScript对象({ "67a39834582ad99a":"暂无数据"，"823f3abe9e3ae504":"单位："})，记录为fromData。

步骤S320:读取i18n-config.js配置项的distLangs（[‘en’]），for循环遍历distLangs数组，判断对应语种的.js文件是否存在。例：只配置了en，则调用fs.existsSync()方法判断/src/locale/目录下的en.js文件是否存在。若存在，在返回true结果，执行S321步骤，若不存在，返回false结果，执行S330步骤。

步骤S321:读取/src/locale/en.js文件的内容，得到JavaScript对象，记录为oldData，通过oldData得到已翻译数组对象(调用方法const oldDataArray=Object.keys(oldData)，oldDataArray即为得到得数组对象[‘67a39834582ad99a’，’823f3abe9e3ae504’]的形式，记录为oldDataArray)，针对fromData（中文的JavaScript对象）做同样的操作，得到一个数组对象(记录为fromDataArray)，过滤中文数组对象(fromDataArray)，判断数组key值是否包含在oldDataArray内，判断方法：

const fromDataArray=Object.keys(fromData).filter(val=>{

return oldDataArray.indexOf(val)===-1

})

），fromDataArray 即为需要翻译得中文的key组成的数组([‘67a39834582ad99a’，’823f3abe9e3ae504’]的形式)。

步骤S322：声明空对象result（翻译结果对象）和map（翻译结果的map对象），for循环fromDataArray数组，通过key取fromData内的中文(fromData[key]，例：fromData[‘67a39834582ad99a’]=‘暂无数据’)，循环过程中将中文已’\n’(\n属于代码里得换行符号)进行字符串的拼接，拼接后的字符串记录为query（query的字符串格式query=‘暂无数据\n单位\n请输入标题’），循环过程中将使用的key值存在数组中，记录为keyList(keyList数组格式为[‘67a39834582ad99a’，’823f3abe9e3ae504’])。由于翻译过程需要调用get请求，get请求过程中，字符串有长度限制，所以限制1500字符串内，请求翻译一次。每次query的长度达到1500以上时，将上述得到query进行翻译。

翻译过程会自动读取i18n-config.js配置信息内的appId、secret，声明一个加盐值salt（const salt=(new Date).getTime();取当前时间作为随机数），进行签名加密前的字符串拼接（const str1=appid+query+salt+key，变量为str1），进行加密签名得到签名值sign(crypto.createHash('md5').update(str1).digest('hex'))，得到所有参数后调用翻译的api请求：

axios({

url:'https://fanyi-api.baidu.com/api/trans/vip/translate',

params:{//get请求参数，为一个对象

q:query,//为上面的得到的需要翻译的中文字符串

appid:appid,//i18n-config.js的appId

salt:salt,//取当前时间作为随机数

from:'auto',//语言来源，auto为自动识别来源

to:‘en’,//要翻译的语言，取自i18n-config.js的distLangs，如zh,th,jp等；

sign:sign，

},

method:'GET'

})。

调用翻译api后得到数组，例如：

输入query的值位置‘暂无数据\n单位\n请输入标题’

得到翻译结果数组trans_result=[

{

‘src’:’暂无数据’,

‘dst’:’No data’,

},

{

‘src’:’单位’,

‘dst’:’Unit’,

},

{

‘src’:’请输入标题’,

‘dst’:’Please specify a title’,

},

]

循环遍历翻译结果数组trans_result(index为数组遍历的累加值，遍历值为0，1，2，3，4....)，在result和map对象内累加结果；

keyList和trans_result的序列位置(index)相同；

单个遍历案例：

map[item.src]=trans_result[index].dst=>

map[’暂无数据’]=’Nodata’

result[keyList[index]]=trans_result[index]item.dst =>result[‘67a39834582ad99a’]=’No data’。

本次调用翻译api完成后，会清空query和keyList，并继续累加，达到1500字符串后，继续调用翻译api，将结果累加到result和map对象上，以次循环，直至fromDataArray循环完成，该语言（en已翻译完成）即翻译完成。

步骤S323:将S322得到结果result对原有的数据进行覆盖累加操作（result={...oldData,...result}oldData为步骤S321中得到的英文数据对象），读取/src/locale/目录下的en.js.map文件(let oldMap=fs.readFileSync(mapFile,'utf8'))，将S322得到结果map对oldMap（原有数据）进行覆盖累加操作（map={...map,...oldMap};），得到合并后的result和map数据对象。

步骤330：读取/src/locale/zh.js文件的内容，得到JavaScript对象，记录为fromData，通过fromData得到需要翻译的全量中文数组对象(调用方法constfromDataArray=Object.keys(fromData)，fromDataArray即为需要翻译得中文的key组成的数组([‘67a39834582ad99a’，’823f3abe9e3ae504’]的形式)，后续全量翻译过程同步骤S322过程。

步骤S350:将前置流程的reselt数据对象，拼接字符串（前面需加module.exports=），并覆盖写入/src/locale/目录下的en.js文件内（fs.writeFileSync(file,`module.exports=${JSON.stringify(result,null,'\t')};`,'utf8');），将前置流程的map数据对象，覆盖写入/src/locale/目录下的en.js.map文件内（fs.writeFileSync(mapFile,JSON.stringify(map,null,'\t'),'utf8');），至此，en语言的翻译过程就结束了，若distLangs配置了多个语种:例：[‘en’，‘yue’，‘jp’，‘kor’，‘fra’]，则会继续执行S320->S350流程输出另外四种语言的结果(继续生成yue.js,yue.js.map)，直至五种语言全部翻译完成。这一流程了省去了新增语种的翻译工作和后续项目迭代过程中的比对翻译过程。

步骤S130中，先在i18n-config.js文件内配置翻译平台（https://fanyi-api.baidu.com/）注册申请的appId（应用ID，一个注册的账号对应一个应用ID）和secret（密钥）后，在终端执行以下命令：

npx i18n translate，webpack-in-loader包会读取步骤S120中已抓取的zh.js文件，在node进程中，取为JavaScript对象，将value(对象的值)导出成一个数组；会读取i18n-config.js的配置信息，识别将要翻译的语言。如实例：

dir:"./src/locale/",//目标目录

file:'zh.js',//翻译的文件

distLangs:['en'],//要翻译的语言distLangs:['en']

distLangs内只配置了一种语言，目标文件为dir目录下的file文件

即：/src/locale/zh.js为翻译源文件，遍历distLangs数组，翻译输出对应语言的输出文件，即：

en.js和en.map.js

翻译过程如下：

oldData为项目中现有的en.js，如不存在，oldData={}空对象

fromData步骤S120中的读取的zh.js

let map={}//空对象，用于输出.map文件的内容

//oldData为已有翻译的数据，读取en.js内容得到对象

const oldDataArray=Object.keys(oldData)

//通过对比中文json和英文josn，取出未翻译的中文json

判断key的键值是否相同，如zh.js的key，在en.js中不存在，则为未翻译的中文。

经过上面得代码转换后得到类似[‘暂无数据’，’单位’，’请输入标题’]这种形式得中文数组，记录fromDataArray，这个为.js文件的输出内容，map为.map文件的输出内容，并已’\n’(\n属于代码里得换行符号)进行字符串的拼接（拼接过程如下：将fromDataArray进行拼接

let query=''//需要翻译的中文字符串

let keyList=[]//当前翻译的key组成的数组

let translateState=true;//翻译成功与否的状态

const fromDataArrayLen=fromDataArray.length

for (let i=0;i<fromDataArrayLen;i++){//将需要翻译的文案由数组转化为长字符串

const key=fromDataArray[i]//需要翻译的中文

if(translateState){//translateState有两个状态，true：成功，继续翻译，false：失败，即在翻译过程中出现错误，会中断翻译过程，并在终断反馈错误信息，

if(String(query).length>=1500){//由于get请求过程中，字符串有长度限制，所以限制1500字符串内，请求翻译一次

translateState=awaittranslate(query,keyList);//翻译完成后

query=fromData[key]//清空上传的字符串拼接，继续后续的拼接

keyList=[key]//清空数组，并继续记录key

}else{

query+='\n'+fromData[key]//数组转字符串的拼接过程

keyList.push(key)//记录需要翻译的中文的key

if(i===fromDataArray.length-1){//拼接结束进行翻译

translateState=await translate(query,keyList);

}

这个一过程得到的字符串拼接展示形式为：

query=‘暂无数据\n单位\n请输入标题’。

需要翻译的中文的key为：

keyList=[‘67a39834582ad99a’,’823f3abe9e3ae504’,’823f3abe9e3ae504’]。

translateState为翻译的成功与否；

translate(query,keyList);为调用翻译接口的方法，代码如下：

config为i18n-config.js内的配置信息；

appId、secret为翻译的时候需要用到的参数；

const salt=(new Date).getTime();//取当前时间作为随机数；

const query=val;//为上面的得到的需要翻译的中文字符串。此为加密过程，翻译的必要参数。

const str1=appid+query+salt+key;//需要加密得到签名的字符串拼接。

const sign=Utils.Md5(str1);//md5加密后得到的签名

axios({

url:'https://fanyi-api.baidu.com/api/trans/vip/translate',

params:{//get请求参数，为一个对象

q:query,//为上面的得到的需要翻译的中文字符串

appid:appid,//i18n-config.js的appId

salt:salt,//取当前时间作为随机数

from:'auto',//语言来源，auto为自动识别来源

to:toCode,//要翻译的语言，取自i18n-config.js的distLangs，如zh,th,jp等；

sign: sign，

},

method:'GET'

})

//调用翻译api后得到数组

例如：

输入‘暂无数据\n单位\n请输入标题’

得到数组trans_result=[

{

‘src’:’暂无数据’,

‘dst’:’No data’,

},

{

‘src’:’单位’,

‘dst’:’Unit’,

},

{

‘src’:’请输入标题’,

‘dst’:’Please specify a title’,

},

]

遍历数组

以单个为例：

map[item.src]=item.dst=>map[’暂无数据’]=’No data’

result[keyList[index]]=item.dst=>result[‘67a39834582ad99a’]=’No data’

//单次请求完成后，会有1.5秒的延迟，形成请求队列，避免应该请求频繁而报错。

针对输出en.js文件，字符串拼接的方式module.exports=+得到的结果（代码示例中的result），并已utf8格式写入en.js，如不存在en.js，会创建en.js，并写入fs.writeFileSync(file,`module.exports=${JSON.stringify(result,null,'\t')};`,'utf8');针对输出.map文件，将得到的结果（代码示例中的map）写入en.js.map文件，如不存在en.js.map，会创建en.js.map，并写入：

fs.writeFileSync(mapFile,JSON.stringify(map,null,'\t'),'utf8')。

distLangs可以配置的选项：

拼接后，记录为query。webpack-in-loader包继续读取i18n-config.js文件中配置的distLangs、appId、secret信息，遍历distLangs（[en]）数组，开始调用翻译的接口进行翻译，向https://fanyi-api.baidu.com/api/trans/vip/translate调用get请求，将请求返回的结果，通过’\n’分割成数组形式，根据返回序列的位置和中文的JavaScript对象对比，转换出两个JavaScript对象，分别为key(文案ID)-value(英文)，key(中文)-value(英文)。

webpack是代码编译工具，有入口、出口、loader和插件。webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

webpack默认只能理解JavaScript和JSON文件，但实际工作中各种需求层出不穷，文件类型也多种多样.比如.vue、.ts、图片、.css等，这就需要loader增强webpack处理文件的能力。

针对vue和webpack搭建的应用项目中，存在.vue和.js/.ts文件，而.vue文件编写的应用，无法直接在浏览器上直接运行，需要借助vue-loader转化成浏览器能识别的语言（主要是ECMAScript5规范的语法），而js文件中如果在编写过程中写入ECMAScript6，7，8，9规范的语法，也无法在浏览器上直接运行，所以需要babel-loader进行转化成浏览器能识别的语言如下代码示例。

在use内，以[]（数组）包裹多个loader，按倒序的方式，执行多个loader的转化规则，所以webpack-in-loader必须在其他loader之前，先进行国际化的转化，在交由其他loader转化。

翻译结束后，webpack-in-loader包会将转换出得JavaScript对象在./src/locale/（i18n-config.js文件内配置的dir）目录内，生成en.js和en.js.map文件，en.js文件就是我们后续用到的英文语言包。

转化模块用于在项目运行或打包过程中，根据入口文件的文件引用，依次编译引用到的文件，编译过程如下:识别引用文件的文件后缀格式，如是.vue和.js/.jsx/.ts/.tsx为后缀的文件，则将该文件的文本进行中文的正则匹配，并将匹配到的中文进行文案ID的转化（文案ID的转化同步骤S110），判断文案ID在语言包中是否存在（读取zh.js的文本内容为JavaScript对象，将转化的文案ID放入中文的JavaScript对象中比对，判断该对象中是否有这个文案ID的键值），若存在，则进行$t(‘文案ID’)的转化，即将该文本转化为对应文案ID所映射的语言包变量。并交由下个loader继续编译转化(.vue文件由webpack-in-loader转化结束后，继续交由vue-loader编译)，直至项目中引用的文件全部编译完。

转化模块实现了项目中语义的中文的保留，增加了项目源代码的可读性，实现项目中的语言变量的自动转化过程。

实施例代码展示如下：

en.js

module.exports={

"67a39834582ad99a":"No data",

"823f3abe9e3ae504":"Unit:",

"304913ff3b42de25":"Please specify a title",

"116c9edf49bb31cb":"Submission Notes",

"b919dfc8991035fb":"Please enter remarks,such as relevantchange information",

"9bf0b9d0caea0112":"Note:After the success of the submission,please go to the to-be-published list of the [Operation Center] to publishthe object to the generation environment",

"11aaddfa70b8cdaa":"Cancel",

"75535671cf4002ae":"Confirm and Submit",

"4b7b6f2b87d34bac":"Ok",

"0fff44c827a4f3b6":"Sign In",

"a1805b0f0117f109":"Username",

"604a0b11e916f387":"Password",

"1ce8aeb857f50892":"Please enter login name",

"9103e63d2ac62636":"Please enter the login password",

"42a7e6b6e29088b4":"Refresh",

"d818ec3fe4ca15cc":"Current Table",

"eec7591f43232e95":"Close",

"02379573013b8d33":"Open",

}

en.js.map

{

"暂无数据":"No data",

"单位：":"Unit:",

"请指定标题":"Please specify a title",

"提交备注":"Submission Notes",

"请输入备注，如相关变更信息":"Please enter remarks, such asrelevant change information",

"说明：提交成功后，请前往【运维】模块的待发布列表，可发布对象至生成环境":"Note: After the success of the submission， please go to the to-be-published list of the [Operation Center] to publish the object to thegeneration environment",

"取消":"Cancel",

"确定并提交":"Confirm and Submit",

"确定":"Ok",

"登录":"Sign In",

"用户名":"Username",

"密码":"Password",

"请输入登录名":"Please enter login name",

"请输入登录密码":"Please enter the login password",

"刷新":"Refresh",

"当前表":"Current Table",

"关":"Close",

"开":"Open",

}

en.js和zh.js文件的key是对应关系。

具体的，在步骤S110中，需修改对应的webpack配置，配置如下所示：

const path=require('path');

module.exports={

//其他配置

module:{

rules:[

{

test:/\.vue$/,

use:[

{

loader:'vue-loader',

},

{

loader:'webpack-in-loader',//一定要作为第一个loader

options:{

localeFile:path.join(process.cwd(),'src/locale/zh.js')//与cli中相同，若生成的时候保持默认，则不需要配置

}

]

},

{

test:/\.(jsx|js) $/,

include:[resolve('src')],

use:[

{

loader:'babel-loader',

},

{

loader:'webpack-in-loader',//一定要作为第一个loader

options:{

}

]

},

]

}

这时在项目运行或者编译时，webpack-in-loader会在编译每个文件的过程中，运行generate命令的抓取动作，如文案ID一致，则代码中的中文会自动转化为$t(“文案ID”)，实现项目的多语言转换效果。

正则匹配项目运行过程中进行到得文件中得中文，转化为key值，然后和zh.js的内容进行匹配，如zh.js存在对应的key值，当前中文会转化为$t(‘key’)。

Vue I18n是Vue.js的国际化插件。它可以轻松地将一些本地化功能集成到你的Vue.js应用程序中。

new VueI18n({

locale:'en',//为当前显示的语种

messages:{//注入的语言包，而我们需要将得到的en.js和zh.js注入messages内，下面示例英文和中文的key同为‘hello’

en:{

hello:'english'

},

zh:{

hello:'简体'

},

})

$t为vue-i18n插件的api，如上方实例，在页面展示的地方，代码层面应写成$t(‘hello’)；

所以webpack-in-loader主要是做了一个中文转化$t(‘文案ID’)的过程，其优点在于省去了人工编写en.js和zh.js语言包，和代码层面写入$t(‘key’)值的过程，文案ID也需要自己声明。若再增加一种语言jp，还得维护jp.js语言包，而使用webpack-in-loader，只用配置一个语种，执行一行命令即可。

首次使用时，需进行步骤S110进行项目的配置，后续版本迭代执行步骤S120-步骤S130处理：

首先，步骤S120，提取本次迭代新增的中文；

之后，步骤S130，翻译distLangs(翻译语种枚举)配置的所有语种，

distLangs用户可以自行配置

distLangs如配置了多个语种:例：[‘en’，‘yue’，‘jp’，‘kor’，‘fra’]

执行npx i18n generate命令后：

会遍历distLangs数组，依次翻译，并生成对应的.js和.map文件。

1.先执行en的翻译流程，生成en.js,en.js.map文件，

2.后续执行yue的翻译流程，生成yue.js,yue.js.map文件，依次执行

3.最后执行fra的翻译流程，生成fra.js，fra.js.map文件。待五种语言全部执行完成后，终止进程。

如图2所示，上个版本已处理过的内容会保留，只翻译新增的中文，这样可以减少get请求所消耗的时间和原有版本被覆盖的问题。

最后，修改map文件，重新导入语言包，即可完成这次版本迭代的国际化处理。

通过该系统高效实现应用产品的国际化和后续迭代。应用产品指软件中全部显示的文字，实现中文切换其他不同语言的方式。后续迭代指，软件更新的时候会增加中文文案，后续软件更新新增的中文文案也能高效转化。

本发明的关键技术在于通过命令行的方式一键处理语言包，并通过webpack-loader，进行语言变量的转化注入。

此外，本发明实施例还提供一种能够实现上述方法的基于vue和webpack的前端国际化多语言转换系统。

在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。

上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims

1.基于vue和webpack的前端国际化多语言转换方法，其特征在于，所示方法包括以下步骤：

步骤S140，转化模块，在项目运行或打包过程中，自动转化中文为语言变量

步骤S130中，先在i18n-config.js文件内配置翻译平台注册申请的应用ID和密钥后，在终端执行以下命令：

npx i18n translate，webpack-in-loader包会读取步骤S120中已抓取的zh.js文件，在node进程中，取为JavaScript对象，将对象的值导出成一个数组；会读取i18n-config.js的配置信息，识别将要翻译的语言；

翻译过程如下：

oldData为项目中现有的en.js，如不存在，oldData为空对象；

fromData为步骤S120中的读取的zh.js；

使得map为空对象，用于输出.map文件的内容；

oldData为已有翻译的数据，读取en.js内容得到对象；

通过对比中文json和英文josn，取出未翻译的中文json；

判断key的键值是否相同；

经过代码转换后得到形式为[‘暂无数据’，’单位’，’请输入标题’]的中文数组，记录fromDataArray，其为.js文件的输出内容，map为.map文件的输出内容，并已进行字符串的拼接；

拼接过程如下：

1）将fromDataArray进行拼接；

2）确定需要翻译的中文字符串；

3）判断当前翻译的key组成的数组；

3）确认翻译成功与否的状态；

4）将需要翻译的文案由数组转化为长字符串；

5）需要翻译的中文有两个状态，true：成功，继续翻译，false：失败，即在翻译过程中出现错误，会中断翻译过程，并在终断反馈错误信息；

6）翻译完成后清空上传的字符串拼接，继续后续的拼接；

7）清空数组，并继续记录key数组转字符串的拼接过程；

8）记录需要翻译的中文的key，拼接结束进行翻译；

得到的字符串拼接展示形式为：

query=‘暂无数据\n单位\n请输入标题’；

需要翻译的中文的key为：

keyList=[‘67a39834582ad99a’,’823f3abe9e3ae504’,’823f3abe9e3ae504’]；

拼接后，记录为query；webpack-in-loader包继续读取i18n-config.js文件中配置的distLangs、appId、secret信息，遍历distLangs（[en]）数组，开始调用翻译的接口进行翻译，向翻译平台调用get请求，将请求返回的结果，通过’\n’分割成数组形式，根据返回序列的位置和中文的JavaScript对象对比，转换出两个JavaScript对象，分别为文案ID-英文，中文-英文。

2.根据权利要求1所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤S110中，针对vue和webpack搭建的应用项目，进入项目根目录，在终端执行安装依赖的命令：

npm i vue-i18n

npm i webpack-in-loader --save-dev

在终端执行初始化命令：

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中，包括如下子步骤：

步骤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空文件；

5.根据权利要求3所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，在步骤130中，包括以下子步骤：

步骤S320:读取i18n-config.js配置项的distLangs，通过for循环遍历distLangs数组，判断对应语种的.js文件是否存在；若存在，在返回true结果，执行S321步骤，若不存在，返回false结果，执行S330步骤；

步骤S322：声明空对象result和map，for循环fromDataArray数组，通过key取fromData内的中文，循环过程中将中文进行字符串的拼接，拼接后的字符串记录为query，循环过程中将使用的key值存在数组中，记录为keyList；将上述得到query进行翻译，翻译过程会自动读取i18n-config.js配置信息内的appId和secret；声明一个加盐值salt，const salt=(new Date).getTime();取当前时间作为随机数，进行签名加密前的字符串拼接，进行加密签名得到签名值sign，得到所有参数后调用翻译的api请求；调用翻译api完成后，清空query和keyList，并继续累加，达到1500字符串后，继续调用翻译api，将结果累加到result和map对象上，以次循环，直至fromDataArray循环完成，该语言翻译完成；

步骤S340: 新建空的en.js文件，并写入默认文本module.exports = {}，用于方便后续内容的写入；新建空的en.js.map文件，用于方便后续内容的写入；

6.根据权利要求5所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，步骤S321中判断数组key值是否包含在oldDataArray内的判断方法如下：

const fromDataArray=Object.keys(fromData).filter(val=>{

return oldDataArray.indexOf(val)===-1

}。

7.根据权利要求6所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，步骤S322中，将中文进行字符串的拼接方式为const str1 =appid+query+salt+key，变量为str1。

8.根据权利要求7所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，步骤S140中，转化模块用于在项目运行或打包过程中，根据入口文件的文件引用，依次编译引用到的文件，编译过程如下:识别引用文件的文件后缀格式，如果是.vue和.js/.jsx/.ts/.tsx为后缀的文件，则将该文件的文本进行中文的正则匹配，并将匹配到的中文进行文案ID的转化，判断文案ID在语言包中是否存在，若存在，则将该文本转化为对应文案ID所映射的语言包变量；并交由下个loader继续编译转化；.vue文件由webpack-in-loader转化结束后，继续交由vue-loader编译，直至项目中引用的文件全部编译完。

9.根据权利要求8所述的基于vue和webpack的前端国际化多语言转换方法，其特征在于，判断文案ID在语言包中是否存在的方式为：读取zh.js的文本内容为JavaScript对象，将转化的文案ID放入中文的JavaScript对象中比对，判断该对象中是否有这个文案ID的键值。

10.基于vue和webpack的前端国际化多语言转换系统，其特征在于，所述系统用于实现根据权利要求1-9任一项所述的方法。