Vue i18n多语言设置(可在js内引用)
1.安装依赖包npminstalli18n--save2.创建一个单独i18n.js,用于创建一个i18n对象,后续整个项目统一使用该对象。import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)let lang = localStorage.lang?localStorage.lang:'zh...
·
1.安装依赖包npm install i18n --save
2.创建一个单独i18n.js,用于创建一个i18n对象,后续整个项目统一使用该对象。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
let lang = localStorage.lang?localStorage.lang:'zh_CN';
const i18n = new VueI18n({
locale: lang,
fallbackLocale: 'zh_CN',
messages: {
en_US:require('./en_US.json'),
zh_CN:require('./zh_CN.json'),
zh_TW:require('./zh_TW.json'),
}
})
export default i18n;
3.在main.js内将该对象注册到原型链上
import i18n from './utils/locale/i18n';
new Vue({
el: '#app',
router:jxrouter,
store:store,
i18n,
template: '<App/>',
components: { App }
}).$mount('#app')
4.在页面上引用
<div class="base-descr-header">
<img src="./../../assets/svg/portal/app_detail_descr.svg"/>
<div>{{$t('iframeView.tool.appdetail.description')}}</div>
</div>
5.Vue template js内引用
this.tipsInfo=this.$i18n.t('iframeView.tool.appdetail.description');
6.在单独js文件Vue template以外应用,先在js内引入i18n.js,然后通过函数的模式返回数据,务必使用函数返回的模式,因为使用一般属性对象,在编译一次后,后面更改语言,不会自动刷新。
import i18n from './../locale/i18n';
const Menu={
getMenu(){
return [{
id:"web_5d10b86bc3535a56e87d3d4f",
imagepath:require("./../../assets/svg/home/home.svg"),
routerPath:"/home",
objectId:"home",
menuType:"DEFAULT",
name:i18n.t("portal.header.menu.home"),
}]
}
}
export default Menu;
更多推荐
已为社区贡献3条内容
所有评论(0)