实现思路
1，i18next 多语言转换插件
2，i18next-scanner 自动扫描代码中的中文
3，中文作为多语言的key，通过crc32转为语音包的key
第一步：准备好各种包(插件)
1. npm install crc -S
2. npm install vue-i18n -S
3. npm install i18next-scanner -D
下载完之后，开始创建配置文件，首先在package.json 同级目录下 创建js文件；i18next-scaner.config.js
js配置如下：
const fs = require('fs')// node自带 fs文件转换
const { crc32 } = require('crc')// 事先下载 npm install crc 类似哈希的转换格式
module.exports = {
input: [
'src/**/*.{js,vue}',
// Use ! to filter out files or directories
'!src/config/i18n/**',
'!**/node_modules/**'
],
output:'./', // 输出目录
options: {
debug:true,
func:false,
trans:false,
lngs: ['en', 'cn', 'dn'],
defaultLng:'cn',
resource: {
loadPath:'./src/config/i18n/{{lng}}/{{ns}}.json', // 输入路径
savePath:'./src/config/i18n/{{lng}}/{{ns}}.json', // 输出路径
jsonIndent:2,
lineEnding:'\n'
},
removeUnusedKeys:false, // 移除未使用的key
nsSeparator:false, // namespace separator
keySeparator:false, // key separator
interpolation: {
prefix:'{{',
suffix:'}}'
}
},
transform:function customTransform(file, enc, done) {// 自己通过该函数来加工key或value
'use strict'
const parser =this.parser
const content = fs.readFileSync(file.path, enc)
/**
* @param {list} array 指定扫描的标识
*/
parser.parseFuncFromString(content, {list: ['lang'] }, (key, options) => {
options.defaultValue = key
// 将传入的文字转成配置的 key，不一定非用 crc，别的也行，如果内容不会影响 json 格式，不用也行
let hashKey =`k${crc32(key).toString(16)}`
parser.set(hashKey, options)
})
done()
}
}
上个图：
-------i18next-scaner.config.js配置完成--------
第二步，src目录下新建config文件夹，config文件夹内新建i18n文件夹，i18n文件夹内新建index.js文件，同时另外新建en文件夹，cn文件夹，如下图：
此时还不能进行npm run scan扫描翻译，还需要对 i18n里面的index.js配置如下：
import Vuefrom 'vue'
import VueI18nfrom 'vue-i18n'
import enfrom './en/translation.json'
import cnfrom './cn/translation.json'
import crc32from 'crc/crc32'
/* 语言包导入*/
Vue.use(VueI18n)
const i18n =new VueI18n({
locale:'cn', // set locale 默认情况下是中文，使用cn文件下的语言
messages: { en, cn }
})
export function lang(key) {
let hashKey =`k${crc32(key).toString(16)}`
let words = i18n.t(hashKey)
if (words === hashKey) {
words = key
console.log(key, '-没翻译')
}
return words
}
export default i18n
-----------------index.js配置完成------------------------
上个图吧
第三步；都配置好了之后就开始在main.js进行引入对应的文件，如下图
第四步：main.js引入对应文件之后，在package.json里面的scripts对象里面配置"scan":"i18next-scanner",如图：
配置好了就可以在控制台实现自动扫描（只会扫描页面有携带标识的文字，比如{{ $lang('这是一个需要扫描转换的文字') }} ），扫描出来的文字会携带对应唯一的code值。扫描前提是页面的中文有添加标识，这样扫描工具才知道哪些文字需要翻译。直接上图：
最头疼就是如果页面超级多，需要每个页面添加翻译lang标识，贼烦，这是一个手工活，好鸡累！不过至少能实现功能 豁出去了，一个个页面加吧！加漏了后续再继续加！！！！！
最后一步：：如何切换语言，页面给个按钮 点击直接调用this.$i18n.local = ‘en’ 切换成英文（其他）语言，根据自己想要的逻辑随意切换，这里就不多说了。有什么不明白或有错漏的 欢迎留言，指正。（这是本人亲自做过两个项目并已经成功上线！切换语言是纯前端页面切换，如果后台也需要翻译，后续可根据后台返回来的语言，前端进行同步即可！）