vue 引入原生js_原生js调用vue-i18n问题

(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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值