国际化vue-i18n之i18next-scanner自动化使用教程
(√ ) 解决页面使用$t('title')导致可读性差问题(√ ) 解决国际化变量命名冲突问题本文适合已经配置好i18n的开发者, 如还不会配置i18n请阅读:vue中如何使用i18n实现国际化 - 掘金在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具。比如: 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n
阅读本文你将会学到
(√ ) 解决页面使用变量名如$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文件拓展:
更多推荐
所有评论(0)