實現(xiàn)思路
1，i18next? 多語言轉(zhuǎn)換插件
2棍苹，i18next-scanner 自動掃描代碼中的中文
3咬扇，中文作為多語言的key，通過crc32轉(zhuǎn)為語音包的key
第一步：準備好各種包(插件)
1. npm install crc -S
2. npm install vue-i18n -S
3. npm install?i18next-scanner -D
下載完之后廊勃，開始創(chuàng)建配置文件懈贺，首先在package.json?同級目錄下?創(chuàng)建js文件；i18next-scaner.config.js
js配置如下：
const fs = require('fs')// node自帶 fs文件轉(zhuǎn)換
const { crc32 } = require('crc')// 事先下載 npm install crc 類似哈希的轉(zhuǎn)換格式
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) {// 自己通過該函數(shù)來加工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
// 將傳入的文字轉(zhuǎn)成配置的 key坡垫，不一定非用 crc梭灿，別的也行，如果內(nèi)容不會影響 json 格式冰悠，不用也行
? ? ? let hashKey =`k${crc32(key).toString(16)}`
? ? ? parser.set(hashKey, options)
})
done()
}
}
上個圖：
-------i18next-scaner.config.js配置完成--------
第二步堡妒，src目錄下新建config文件夾，config文件夾內(nèi)新建i18n文件夾溉卓，i18n文件夾內(nèi)新建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'
/* 語言包導(dǎo)入*/
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進行引入對應(yīng)的文件爆阶，如下圖
第四步：main.js引入對應(yīng)文件之后，在package.json里面的scripts對象里面配置"scan":"i18next-scanner",如圖：
配置好了就可以在控制臺實現(xiàn)自動掃描（只會掃描頁面有攜帶標識的文字，比如{{ $lang('這是一個需要掃描轉(zhuǎn)換的文字') }} ）辨图，掃描出來的文字會攜帶對應(yīng)唯一的code值班套。掃描前提是頁面的中文有添加標識，這樣掃描工具才知道哪些文字需要翻譯吱韭。直接上圖：
最頭疼就是如果頁面超級多杉女，需要每個頁面添加翻譯lang標識，賊煩速勇，這是一個手工活，好雞累养匈！不過至少能實現(xiàn)功能? 豁出去了都伪，一個個頁面加吧！加漏了后續(xù)再繼續(xù)加ｂ省！Ｊ簟：侄！
最后一步：：如何切換語言雅镊，頁面給個按鈕 點擊直接調(diào)用this.$i18n.local = ‘en’ 切換成英文（其他）語言刃滓，根據(jù)自己想要的邏輯隨意切換，這里就不多說了晃危。有什么不明白或有錯漏的 歡迎留言，指正震叮。（這是本人親自做過兩個項目并已經(jīng)成功上線鳍鸵！切換語言是純前端頁面切換，如果后臺也需要翻譯击罪，后續(xù)可根據(jù)后臺返回來的語言贪薪，前端進行同步即可！）
