前端报错如下:
[Vue warn]: Error in render: “TypeError: Cannot read property ‘_t’ of undefined”
是在项目中用了多语言配置,vue 跟 i18n之间的兼容问题,h5可以正常调用,app会报错。解决方法如下:
main.js文件下配置
import Vue from 'vue'
import App from './App'
//调用i18n
import VueI18n from 'vue-i18n'
import zh from './components/language/zh'
import en from './components/language/en'
//使用Vuei18n
Vue.use(VueI18n)
//使用i18n接收Vuei18n的实例
const i18n=new VueI18n({
locale:uni.getStorage('languageSet')||'zh', //从localStorage里获取用户中英文选择,没有则默认中文
messages:{
zh,//中文
en//英文
}
})
Vue.config.productionTip = false
App.mpType = 'app'
//将i18n设置成原型
Vue.prototype._i18n = i18n
const app = new Vue({
...App,
i18n,
})
app.$mount()
en.js文件如下配置:
module.exports = {
language: {
name: '中文'
},
user: {
login:'login',
register:'register',
loginUsername:'Please enter phone number',
loginpassword:'Please enter your password',
},
mine:{
Account:'account information',
Promote:'Promotion to make money',
problem:'common problem',
protocol:'Related agreements',
aboutUs:'about us',
exit:'sign out'
},
home:{
title:'ZhiTuJueCe',
TotalPoolFunds:'Total pool funds',
OccupiedAmount:'Occupied amount',
TheNumberofParticipants:'The number of participants',
AmountofProfitandLoss:'Amount of profit and loss',
TrialDynamic:'Trial dynamic',
InformationNews:'Information News'
}
}
zh.js文件如下配置:
module.exports = {
language: {
name: 'English'
},
user: {
login:'登录',
register:'注册',
loginUsername:'请输入手机号码',
loginpassword:'请输入登录密码',
},
mine:{
Account:'账户',
Promote:'推广赚钱',
problem:'常见问题',
protocol:'相关协议',
aboutUs:'关于我们',
exit:'退出登录'
},
home:{
title:'智图决策',
TotalPoolFunds:'总池子资金',
OccupiedAmount:'占用金额',
AmountofProfitandLoss:'盈亏金额',
TheNumberofParticipants:'参与人数',
TrialDynamic:'试炼动态',
InformationNews:'资讯新闻'
}
}
vue文件调用i18n:
<template>
<view class="content">
<div @click="changeLanguage()">{{$t('language.name')}}</div> <!-- //切换中英文的按钮 -->
<view class="zLogo">
<image src="../../static/public/logo.png" mode=""></image>
</view>
<view class="zLogin publicwidth">
<!-- <text :class="{zLactives:zLactive==0?true:false}" @click="getL(0)">{{$t('user.register')}}</text> -->
<text :class="{zLactives:zLactive==1?true:false}" @click="getL(1)">{{$t('user.login')}}</text>
</view>
<view class="zLoginBox publicwidth">
<input type="text" value="" :placeholder="$t('user.loginUsername')" v-model="user" class="iptLogin"/>
<input type="text" value="" :placeholder="$t('user.loginpassword')" password="true" v-model="pass" class="iptLogin"/>
</view>
<view class="commit publicwidth">
<view class="cBtn iptLogin" @click="Login()">
<text>{{$t('user.login')}}</text>
</view>
</view>
</view>
</template>
changeLanguage(){
this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh' //设置中英文模式
uni.setStorage('languageSet',this.$i18n.locale) //将用户设置存储到localStorage以便用户下次打开时使用此设置
},


1万+

被折叠的 条评论
为什么被折叠?



