阅读本文你将会学到

  () 解决页面使用变量名如$t('title')导致可读性差问题

  ( ) 解决国际化变量命名冲突问题

  (√ ) 解决变量命名繁琐工作量大问题

本文适合已经配置好i18n的开发者, 如还不会配置i18n请阅读:

1. 安装node包

 npm install vue-i18n@8 -S //安装8.x版本是为了兼容vue的2.x版本

 npm install i18next-scanner -D // 开发依赖

 npm install crc -S // 中文通过crc32转码获得唯一的key, 也避免中文作为索引导致性能不佳和索取不准确问题

 // 根目录package.json配置参考
 "scripts": {
    "scan": "i18next-scanner --config i18next-scaner.config.js"
  },
 "dependencies": {
    "crc": "^4.1.1",
    "element-ui": "2.13.2",
    "vue": "2.6.10",
    "vue-i18n": "^8.27.1"
  },
  "devDependencies": {
    "i18next-scanner": "^3.1.0"
  },

2.配置i18next-scanner

i18next-scanner 的作用是扫描代码中的$lang('xxx')格式的内容, 将lang括号内包含的内容自动输出一份国际化对应的语言json文档.

2.1 根目录新建 i18next-scaner.config.js 文件

const fs = require("fs");
const { crc32 } = require("crc");
module.exports = {
  input: [
    "src/**/*.{js,jsx,vue}",
    // 不需要扫描的文件加!
    "!src/i18n/**",
    "!**/node_modules/**",
  ],
  output: "./", //输出目录
  options: {
    debug: true,
    func: false,
    trans: false,
    lngs: ["zh", "en"],
    defaultLng: "zh",
    resource: {
      loadPath: "./src/i18n/json/{{lng}}.json", //输入路径 (手动新建目录)
      savePath: "./src/i18n/json/{{lng}}.json", //输出路径 (输出会根据输入路径内容自增, 不会覆盖已有的key)
      jsonIndent: 2,
      lineEnding: "\n",
    },
    removeUnusedKeys: true,
    nsSeparator: false, // namespace separator
    keySeparator: false, // key separator
    interpolation: {
      prefix: "{{",
      suffix: "}}",
    },
  },
  // 这里我们要实现将中文转换成crc格式, 通过crc格式key作为索引, 最终实现语言包的切换.
  transform: function customTransform(file, enc, done) {
    //自己通过该函数来加工key或value
    "use strict";
    const parser = this.parser;
    const content = fs.readFileSync(file.path, enc);
    parser.parseFuncFromString(
      content,
      { list: ["lang"] },
      (key, options) => {
        options.defaultValue = key;
        let hashKey = `K${crc32(key).toString(16)}`; // crc32转换格式
        parser.set(hashKey, options);
      }
    );
    done();
  },
};

2.2 根目录package.json配置扫描的运行命令

 // package.json 参考
 "scripts": {
    "scan": "i18next-scanner --config i18next-scaner.config.js"
  },

3. 配置vue-i18n

3.1 目录/src/i18n.js配置

这个文件根据业务自行存放, 我的放在src/i18n.js, 与入口文件main.js同级

import Vue from "vue";
import VueI18n from "vue-i18n";
const { crc32 } = require("crc");
import zh from "@/i18n/json/zh.json";
import en from "@/i18n/json/en.json";

Vue.use(VueI18n);

const localLang = localStorage.getItem("lang"); // 业务需要存放仓库, 如element国际化, 需要刷新页面重新加载, 在main.js初始化element国际化语言. 这里根据你的业务去做语言切换功能.

//实例化语言类
const i18n = new VueI18n({
  locale: localLang || "zh", // 语言标识
  fallbackLocale: localLang || "zh", //默认中文语言
  messages: { zh, en },
});

// --------这里是i18next-scanner新增的配置-------------
function lang(key) {
  let hashKey = `K${crc32(key).toString(16)}`; // 将中文转换成crc32格式去匹配对应的json语言包
  let words = i18n.t(hashKey);
  if (words == hashKey) {
    words = key;
    console.log(key, "-无匹配语言key");
  }
  return words;
}
Vue.prototype.$lang = lang; // 注入全局, 页面$lang('xxx')调用
// --------这里是i18next-scanner新增的配置-------------

export { i18n };

这样一来, 扫描输出是crc32格式的key为索引, i18n插件获取到的中文也转换成crc32格式的key, 如此语言之间就匹配上了.

 3.2 页面调用

 3.3 执行命令

npm run scan

 可以看到日志显示输出了crc格式的key和页面$lang('xxx')括号中包含的value

 

 对应的文件也有了键值对

关于英文翻译, 直接复制zh.json文件的内容到百度翻译: https://fanyi.baidu.com/#zh/en/ , 复制结果到en.json即可, 其他语言同理. 当然公司有专业翻译人士就更好不过了.


总结

i18next-scanner不仅仅可以使用在vue中,  理论上能运行node环境项目都可以使用

  • vue + vue-i18n
  • angular + angular-translate
  • react + react-intl
  • jquery + jquery.i18n.property

i18next-scanner 是很实用的node插件, 对代码中的多语言进行自动索引, 减少了开发key的命名问题, 也让页面回归可读性。

i18next-scanner官方文档: 

 本文参考来源:

本文实战项目案例下载地址:

国际化i18n之i18next-scanner使用案例-Javascript文档类资源-CSDN下载

自动化生成excel文件拓展:

[自动化] 前端国际化导出中英文excel文档_阿喵阿旺的博客-CSDN博客

Logo

前往低代码交流专区

更多推荐