1、安装依赖
第一步当然是安装依赖了,这就不多说了
npm install vue-i18n
安装完成后,导入vue注册,
import Vuei18n from "vue-i18n"
vue.use(Vuei18n)
2、实例化i18n,并配置语言
语言包导入使用commonjs或es6都可以,主要看语言包的导出方式,这里以es6为例
//cn.js
export default {
user:"睡不饱的貉",
}
//en.js
export default {
user:"Raccoon dogs that don't get enough sleep",
}
//main.js中
import cn from "cn.js"
import en from "en.js"
const i18nInstance = new Vuei18n({
locale:"cn"// 默认语言,
messages:{
//语言包
"cn": cn //语言包资源,
"en": en //语言包资源
}
})
Vue.use(i18nInstance)
3、使用
上述步骤之后,会有$t()方法;
在你想要实现语言切换的地方使用$t("user")替换原来的数据;
切换语言只需要修改locale的值就可以实现;
可以使用挂载在vue实例上的$i18n.locale = ”你想切换的语言“;
this.$i18n.locale = "en"
如果在vue3中,可以导入vue-i18n中的usei18n;
const {locale} = usei18n();
修改locale的值可切换语言
locale.value = "en"
以上就是vue中使用i18n的方法,更多实用方法后续再写。