H5W3
当前位置:H5W3 > uniapp技术问答专区 > 正文

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

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>

更多国际化参考https://ask.dcloud.net.cn/article/35872

本文地址:H5W3 » uniapp与vue-i18n实现国际化支持多语言

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址