阅读本文你将会学到

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

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

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

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

vue中如何使用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 separatorkeySeparator: false, // key separatorinterpolation: {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官方文档:

i18next-scanner - npm

本文参考来源:

vue实现多语言切换（i18next-i18next-scanner） - 简书
vue或react多语言自动化实现扫描代码的多语言-i18next-scanner - zcmzks - 博客园

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

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

自动化生成excel文件拓展:

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

国际化vue-i18n之i18next-scanner自动化使用教程相关推荐

vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
vue i18n 国际化保姆级教程_看不懂自己找原因
1.国际化介绍对于一些跨国项目来说,国际化是尤为重要的,那么什么要国际化呢?国际化的意思就是将我们写的项目,能够根据不同国家的语言,进行翻译,进行切换,方便不同国家的客户使用基本思路如下 ① 定义 ...
vscode国际化插件i18n Ally配置
在Vue.js中使用Vue I18n来实现国际化多语言设置,以往都是手动去找到文件写翻译,比较繁琐复杂.通过使用这个插件直接在页面中就可以构建和自动化翻译. 在商店下载i18n Ally插件下载完成 ...
java自定义序列化_Java中的自定义国际化（i18n）
java自定义序列化国际化(i18n)在我们的软件项目中非常重要. 它主要带来以下好处: 将UI字符串外部化为代码文件以外的外部文件,以及易于管理的UI内容. 支持多种语言. 在这篇文章中,将为Ec ...
Java中的定制国际化（i18n）
国际化(i18n)在我们的软件项目中非常重要. 它主要带来以下好处: 将UI字符串外部化为除代码文件之外的外部文件,以及易于管理的UI内容. 支持多种语言. 在这篇文章中,将为Eclipse和Java ...
Spring MVC国际化（i18n）和本地化（L10n）示例
Spring MVC国际化(i18n)和本地化(L10n)示例欢迎来到Spring Internationalization(i18n)教程.任何遍布全球的用户,国际化(i18n)或本地化(L10n ...
spring mvc国际化_Spring MVC国际化（i18n）和本地化（L10n）示例
spring mvc国际化 Welcome to the Spring Internationalization (i18n) tutorial. Any web application with u ...
springboot13 页面国际化（i18n）
员工管理系统 1.首页配置:注意点,所有也免得静态资源都需要使用thymeleaf接管: 2.页面国际化配置i18n文件如果需要在项目中进行按钮自动切换,我们需要自定义一个组件LocaleReso ...
django 国际化支持 I18N
问题描述最近做的网站需要中英双语可以切换,内容大致相同,只是文字上需要做翻译,而且可以让用户进行语言的选择. 问题解决其实页面大部分内容是相同的,只是文字和部分图片不同.django提供了i18n ...

国际化vue-i18n之i18next-scanner自动化使用教程