Ste7en
Ste7en
  • 发布:2018-10-17 16:49
  • 更新:2 天前
  • 阅读:1560

uniapp与vue-i18n实现国际化多语言

分类:uni-app

踩了很多坑,终于捣鼓出来了。

main.js

import Vue from 'vue'  
import App from './App'  
import VueI18n from 'vue-i18n'  

Vue.use(VueI18n)  
Vue.config.productuinTip = false  

const i18n = new VueI18n({  
  locale: 'en-US',  
  messages: {  
    'en-US': {  
      index: {  
        invite: 'Invite',  
        game: 'Game'  
      }  
    },  
    'zh-CN': {  
      index: {  
        invite: '邀请',  
        game: '游戏'  
      }  
    }  
  }  
})  

Vue.prototype._i18n = i18n  
App.mpType = 'app'  

const app = new Vue({  
  i18n,  
  ...App  
})  
app.$mount()  

uniapp 不支持在取值表达式中直接调方法,因此,$t方法不可用,所以通过计算属性的方式:

index.vue

<template>  
  <view class="uni-content">  
    <text>{{ i18n.invite }}</text>  
    <text>{{ i18n.game }}</text>  
  </view>  
</template>  

<script>  
export default {  
  computed: {  
    i18n () {  
      return this.$t('index')  
    }  
  }  
}  
</script>  

<style>  
</style>  
7 关注 分享
Geeker DCloud_UNI_Trust 春秋战国 sonicsunsky@qq.com meHaoTian 易齐 352489099@qq.com

要回复文章请先登录注册

Ste7en

Ste7en (作者)

回复 周建伟: 底部 tabBar 用 plus.nativeObj.View 绘制一个 NView 即可实现国际化
2 天前
2678573188@qq.com

2678573188@qq.com

可以自己写一个底部导航
2019-03-04 14:55
2678573188@qq.com

2678573188@qq.com

:placeholder="i18n.bindTel"这样没有警告
2019-03-04 10:56
2678573188@qq.com

2678573188@qq.com

回复 877703305@qq.com: :placeholder="$t(i18n.account_placeholder)" 会有警告Value of key '请输入密码' is not a string!
2019-03-04 09:23
2678573188@qq.com

2678573188@qq.com

:placeholder="$t(i18n.account_placeholder)"报错
2019-03-04 09:22
沉默的大侠

沉默的大侠

回复 周建伟: 我也想知道。。。
2019-02-01 18:19
周建伟

周建伟

请问底部导航栏的国际化怎么处理?
2019-01-17 17:42
877703305@qq.com

877703305@qq.com

:placeholder="$t(i18n.account_placeholder)"可以使用
2019-01-07 16:55
877703305@qq.com

877703305@qq.com

类似placeholder怎么国际化,{{}}报错,$t(i18n.account_placeholder)无效果
2019-01-07 16:49
hoey

hoey

哥们,这明显是官方bug,要都这么用那不得累死
2018-12-24 16:35
553455177@qq.com

553455177@qq.com

不错啊
2018-11-15 07:42
553455177@qq.com

553455177@qq.com

不错啊
2018-11-15 07:42
春秋战国

春秋战国

谢谢!!uniapp 不支持在取值表达式中直接调方法,因此,$t方法不可用,所以通过计算属性的方式!!
2018-11-04 15:50