(1) 安装
npm install vue-i18n
(2) 工程中使用
[1]在main.js中引入vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
[2] 语言资源
const messages = {
//英文
en: {
message: {
hello: 'hello',
about: 'about',
welcome: "Welcome"
}
},
//简体中文
zhCHS: {
message: {
hello: '你好',
about: '关于',
welcome: "欢迎"
}
},
//繁体中文
zhCHT: {
message: {
hello: '妳好',
about: '關於',
welcome: "歡迎"
}
}
[3] VueI18n实例
const i18n = new VueI18n({
//定义默认语言
locale: 'en',
messages
})
[4] 挂载到Vue的实例上
new Vue({
el: '#app',
router,
i18n, //<====
template: '',
components: { App }
})
[5] 标记在HTML中
注意:这里是$t
h3 {{ $t("message.hello") }}
[6] 标记在js中
methods:{
welcomeMessage(){
return this.username + ', '+ this.$t("message.welcome");
}
},
[7]要想在纯js文件下引用$t()方法必须再加下几个步骤
main.js 下面加上
Vue.prototype.$t = (key, value) => i18n.t(key, value);