1.安装
npm install vue-i18n@8
npm install vue-i18n
注意版本：vue2使用8版本，vue3使用9版本
版本错误：Cannot read properties of undefined (reading 'install')
2.使用
1.在src下新建lang文件
2.准备语言包，语言环境，在lang文件夹下新建en.js, zn.js, index.js
index.js
**
import Vue from "vue";
import VueI18n from 'vue-i18n'
import zn from "./zn"
import en from "./en"
Vue.use(VueI18n); // 全局注册国际化包
// 准备翻译的语言环境信息
const i18n = new VueI18n({
locale: "zn", // 初始化中文
messages: {
"zn":zn,
"en":en
}
});
export default i18n
zn.js
**
export default {
main:{
message:"公告",
}
};
en.js
**
export default {
main:{
message:"notice",
}
};
3.main.js
**
import i18n from './lang/index'
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
3.切换语言
1.定义改变语言的方法
**
changeLang(){
if(this.$i18n.locale === 'zn'){ // 判断当前语言
this.$i18n.locale = 'en' // 设置当前语言
} else {
this.$i18n.locale = 'zn'
}
这里已经可以实现简单的中英文切换了，如果想要实现自动化，看第四步
4.进阶-自动化
1.安装
**
npm install vue-i18n@8
npm install i18next-scanner -D // 开发依赖
npm install crc // 中文通过crc32转码获得唯一的key
2.main.js
**
import i18n from './i18n'
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
3.package.json配置
**
"scripts": {
"scan": "i18next-scanner --config i18next-scaner.config.js"
},
"dependencies": {
"crc": "^4.1.1",
"vue": "2.6.10",
"vue-i18n": "^8.27.1"
},
"devDependencies": {
"i18next-scanner": "^3.1.0"
},
4.配置i18next-scanner
根目录新建 i18next-scaner.config.js 文件
i18next-scanner 的作用是扫描代码中的$lang('xxx')格式的内容, 将lang括号内包含的内容自动输出一份国际化对应的语言json文档
**
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();
},
};
5.配置vue-i18n
src目录下新建 src/i18n.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: "zn", // 初始化中文
messages: {
"zn":zh,
"en":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 default i18n
6.页面使用
**
<span class="icon_text">{{ $lang('公告') }}</span>
<van-search :placeholder="$lang('请输入搜索关键词')" @click="search" />
执行命令，会生成一个i18n文件，文件下有两个json语言包文件
**
npm run scan
**
{
"K43ee71e3": "公告"
}
翻译中文的文件，直接复制到 en.json文件中
本文参考来源:
