记一次前端Vue项目国际化解决方案

背景

���一个vue项目，要实现国际化功能，能够切换中英文显示，因为该项目系统的用户包括了国内和国外用户。

需求

1、页面表单上的所有中文标签要国际化，包括表单属性标签、表格列头标签等， title=“数量”；

2、输入框的提示内容需要国际化，如 placeholder=“选择日期”

3、js代码中的提示信息需要国际化，如 message(“请勾选批量设置”)、confirm(‘您确定要设置业务损耗吗？’）、title: ‘删除错误’ 等；

解决方案

1、开发流程，一开始开发过程中，我们不考虑国际化，等代码基本完成后，最后再进行国际化；

2、考虑日后还可能由其他语种，所以这里我们做国际化词语库时，国际化编码使用5位数字，对应多种语言值，即一对多；

3、前端我们重新封装一个全局方法 $lang(param1, param2) 来支持国际化，param1是国际化编码，param2是默认值（如果国际化编码没找到对应的语言单词，则默认用param2，且去掉左右两边的 ‘~’符号）；

（其实后来又分析了下，如果一开始前端开发人员把所有需要国际化的中文词语，都写成 $lang(‘中文词语’) ， $lang方法逻辑再修改下，如果没有第二个参数并且第一个参数对应的国际化词语也没有，则直接显示第一个参数字符串，而且这样的话，到后面再提取代码中的需要国际化的内容时就会很精确了。）

4、国际化流程：

• 从前端代码文件中将所有的中文提取出来，形成一个数组放到一个json文件中，并且数组需要去重一下；
• 使用第三方的翻译接口，来对导出的中文进行翻译，生成一个中英文对照键值对json文件；
• 校对中英文对照表，因为有的翻译不一定准确；
• 根据校对后的中英文对照表，生成国际化编码库，并创建两个国际化文件；
• 根据校对后的中英文对照表，并分析代码规则，将程序代码中的中文进行国际化处理；

  国际化流程实施

  在国际化流程实施中，我使用编写js脚本代码来实现相关的处理，使用node环境来执行脚本；

  1、提取中文

  从前端代码文件中将所有的中文提取出来，形成一个数组放到一个json文件中，并且数组需要去重一下；

  下面的代码，是用来提取文件代码中的中文的，我们可以将代码文件命名为extractChinese.js，使用node来执行该脚本；

  代码中要国际化的路径设置的是当前目录下的src下的 components和pages文件夹

  const fs = require('fs');  const path = require('path');    const chineseRegex = /[\u4e00-\u9fa5]+/g;    function extractChineseFromFile(filePath) {    const content = fs.readFileSync(filePath, 'utf-8');    const chineseWords = content.match(chineseRegex);    return chineseWords || [];  }    function processDirectory(directoryPath) {    const files = fs.readdirSync(directoryPath);    const chineseSentences = [];      files.forEach((fileName) => {      const filePath = path.join(directoryPath, fileName);      const stats = fs.statSync(filePath);      if (stats.isDirectory()) {        chineseSentences.push(...processDirectory(filePath));      } else if (stats.isFile() && ['.js', '.vue'].indexOf(path.extname(filePath)) > -1) {      const chineseWords = extractChineseFromFile(filePath);        chineseSentences.push(...chineseWords);      }    });      return chineseSentences;  }    function main() {    const srcDirectory = path.join(__dirname, 'src');    const componentsDirectory = path.join(srcDirectory, 'components');    const pagesDirectory = path.join(srcDirectory, 'pages');      const componentsChineseSentences = processDirectory(componentsDirectory);    const pagesChineseSentences = processDirectory(pagesDirectory);    const allChineseSentences = [...componentsChineseSentences, ...pagesChineseSentences];      //const allChineseSentences = componentsChineseSentences;      const outputPath = path.join(__dirname, 'output.json');   // 使用 Set 对象来去重    let backString = Array.from(new Set(allChineseSentences));   // 对去重后的数组进行排序    backString.sort();  fs.writeFileSync(outputPath, JSON.stringify(backString, null, 2), 'utf-8');      console.log('提取到的中文单词或语句已保存到output.json文件中。');  }    main();

  2、翻译中文

  使用第三方的翻译接口，来对导出的中文进行翻译，生成一个中英文对照键值对json文件；

  翻译接口，这里我们用的是百度翻译，至于如何去使用百度翻译，这里就不再说了，自己去百度看吧;

  该步骤需要用到第一步生成的 output.json 文件，然后翻译结果是存在 translated_zh_en.json 中。

  const fs = require('fs');  const axios = require('axios');  const appId = '123456789'; // 替换成你的百度翻译的APP ID  const secretKey = '999999999'; // 替换成你的百度翻译的密钥    const crypto = require('crypto');  axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";  function md5Hash(input) {    // 创建一个哈希对象    const hash = crypto.createHash('md5');      // 更新哈希对象的内容    hash.update(input);      // 获取哈希值的二进制表示    const hashBuffer = hash.digest();      // 将二进制转换为十六进制表示    const hashHex = hashBuffer.toString('hex');      // 返回小写的哈希值    return hashHex.toLowerCase();  }      // 使用百度翻译API进行翻译  async function translateToEnglish(text) {     const params = {          q: text,          appid: appId,          salt: Date.now(),          from: 'zh',          to: 'en',          sign: ''      };            // 计算签名      params.sign = md5Hash(params.appid + params.q + params.salt + secretKey);        // 请求翻译      const url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${encodeURIComponent(params.q)}&from=zh&to=en&appid=${params.appid}&salt=${params.salt}&sign=${params.sign}`;    const response = await axios.get(url);     //console.log(url);    //console.log(response.data)    // 返回翻译结果      return response.data.trans_result[0].dst;  }  function sleep(ms) {    return new Promise(resolve => setTimeout(resolve, ms));  }    async function mysleep() {    console.log('休息1秒......................');    await sleep(1000); // 暂停 1 秒    console.log('休息完成...');  }   async function process() {      // 读取json文件      const data = JSON.parse(fs.readFileSync('output.json', 'utf8'));          // 存储翻译结果的对象      let translationData = {};          let execNumber = 1;    // 遍历中文字符串数组，进行翻译    for (let i = 0; i = 120) {   // 如果不想全部执行，则执行多少场退出            break;        } else if (i == execNumber*20) { // 每执行20次接口调用，就休息1秒            execNumber++;            await mysleep()        }    }         // 将翻译结果写入translate.json文件中      fs.writeFileSync('translated_zh_en.json', JSON.stringify(translationData, null, 2));  }    process().catch(error => {      console.error(error);  });

  3、校对翻译

  校对中英文对照表，因为有的翻译不一定准确；（找个行业英语水平高点的人，自己去校对吧）

  4、创建国际化库

  根据校对后的中英文对照表，生成国际化编码库，并创建两个国际化文件；

  const fs = require('fs');    // 读取原始 JSON 文件  const data = JSON.parse(fs.readFileSync('translated_zh_en.json', 'utf8'));    // 中文和英文的 JSON 文件  const chineseData = {};  const englishData = {};    let serialNumber = 00001;    // 遍历原始数据，生成新的键值对  for (let chinese in data) {    const english = data[chinese];      // 生成新的键值对，序号为 5 位数字    const key = `N${String(serialNumber).padStart(5, '0')}`;        chineseData[key] = chinese;    englishData[key] = english;      serialNumber++;  }    // 将中文和英文的 JSON 数据写入文件  fs.writeFileSync('cn.json', JSON.stringify(chineseData, null, 2));  fs.writeFileSync('en.json', JSON.stringify(englishData, null, 2));

  5、代码国际化处理

  根据第4步生成的中文国际化文件 cn.json ，并分析代码规则，将程序代码中的中文进行国际化处理；

  首先要分析程序需要国际化的代码规则，因为这个替换不是简单的去就把中文替换，可能代码都由变化，我们分析项目代码中目前的规则如下：

  场 景	**代码示例****	**查找内容****	**替换内容****
  作为组件元素内容的	取消 如调整了颜色尺码，保存后请务必核对检查数量和配色数据! 尺码信息	>取消{{$lang(‘10000’, ‘取消’)}}{onlyShow?'查看':'修改'}}