cannot read property ‘_t‘ of undefined“和中英文切换

14 篇文章 0 订阅

前端报错如下:

[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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

✎﹏ℳ๓敬坤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值