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

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

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()
\n

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>
\n
5 分享 关注
Geeker DCloud_客服_Trust 春秋战国 sonicsunsky@qq.com DCloud_UNI_mehaotian
周建伟

周建伟

请问底部导航栏的国际化怎么处理?
0 赞 3 天前
877703305@qq.com

877703305@qq.com

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

877703305@qq.com

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

hoey

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

553455177@qq.com

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

553455177@qq.com

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

春秋战国

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

要回复文章请先登录注册