Vue2的国际化
# 插件安装
npm install vue-i18n
现在我用的是`"vue-i18n": "^7.8.1"`版本
语言包准备
在src下创建lang文件夹,进行语言配置
// lang/zh.js
export default {
userManage: {
fullName: '姓名',
phoneNumber: '手机号',
role: '角色',
}
}
// lang/en.js
export default {
userManage: {
fullName: 'Full name',
phoneNumber: 'Phone number',
role: 'Role',
},
}
准备翻译的语言环境信息
// lang/index.js
import Vue from "vue";
import VueI18n from 'vue-i18n'
import zh from "./zh"
import en from "./en"
Vue.use(VueI18n); // 全局注册国际化包
// 准备翻译的语言环境信息
const i18n = new VueI18n({
locale: "zh", // 初始化中文
messages: {
"zh":zh,
"en":en
},
globalInjection: true, // 全局注册$t方法
});
export default i18n
注入
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import i18n from './lang/index'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
使用
可以直接使用$t('')
进行读取数据,在方法中使用this.$t('')
读取。
<h1>{{ $t("userManage.fullName") }}:i东东</h1>
cut() {
console.log(this.$t("userManage.fullName"));
}
// 语言切换
cut() {
if (this.$i18n.locale === "zh") {// 判断当前语言
this.$i18n.locale = "en"; // 设置当前语言
} else {
this.$i18n.locale = "zh";
}
}
Vue3和Vue2区别
// lang/index.js
import { createI18n } from 'vue-i18n'; // 与vue2的VueI18n使用方式不同
import zh from './zh';
import en from './en';
const i18n = createI18n({
locale: 'zh',
messages: {
'zh': zh,
'en': en
}
});
export default i18n;
// src/main.js
import i18n from './lang';
App.use(i18n);
// 语言切换
// vue3使用方式
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
cut(lang){
i18n.locale.value = lang // 通过修改value值来进行语言切换
}
小结
通过以上配置又完成了项目的国际化配置!