Ste7en
Ste7en
  • 发布:2018-10-17 16:49
  • 更新:2023-11-17 18:40
  • 阅读:47116

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>

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

15 关注 分享
Geeker Trust 春秋战国 sonicsunsky 虫雪浓 易齐 今天回复我了吗 9***@qq.com 没得好名字 z***@sina.com 7***@qq.com 冷月i 1***@qq.com 2***@qq.com MonikaCeng

要回复文章请先登录注册

zsb

zsb

回复 7***@qq.com :
可以切换了
2020-09-01 15:52
7***@qq.com

7***@qq.com

回复 zsb :
兄弟你可以切换语言了吗?
2020-08-26 11:54
zsb

zsb

大佬怎么切换语言 求教
2020-08-10 13:15
silianpan888

silianpan888

回复 1***@163.com :
Vue.prototype._i18n = i18n一定要写在App.mpType = 'app'下面

App.mpType = 'app'
Vue.prototype._i18n = i18n
2020-07-23 23:20
1***@163.com

1***@163.com

回复 8***@qq.com :
main.js里面生命一个全局变量接受i18n和语言包,如代码:
let i18n = new VueI18n({
locale: uni.getStorageSync('lang') ? JSON.parse(uni.getStorageSync('lang')).value : 'lang_en',
messages
})
Vue.prototype.$i18nObj = i18n
Vue.prototype.$lang = i18n.messages[i18n.locale]

然后页面上读取的时候,如代码:view.item-left {{ $lang.startTime }}

另外,做语言切换的时候要在组件生成之前重新获取语言包,如以下代码:
beforeCreate() {
this.$lang = this.$i18nObj.messages[JSON.parse(uni.getStorageSync('lang')).value]
},
2020-07-14 13:44
8***@qq.com

8***@qq.com

回复 1***@163.com :
请教一下,怎么解决的啊
2020-07-14 11:56
1***@163.com

1***@163.com

pc端国际化没问题,但是在移动端运行的时候就报错了,报错代码如下:
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'i18n._t')"
20:42:19.424 (found at pages/index/index.vue:1)
20:42:19.441 TypeError: undefined is not an object (evaluating 'i18n._t')
20:42:19.474 cid unmatched at view.umd.min.js:1
20:42:19.491 TypeError: Invalid attempt to destructure non-iterable instance.
20:42:19.524 In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1
20:42:19.541 cid unmatched at view.umd.min.js:1
20:42:19.574 TypeError: Invalid attempt to destructure non-iterable instance.
20:42:19.591 In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1
20:42:19.609 cid unmatched at view.umd.min.js:1
20:42:19.631 TypeError: Invalid attempt to destructure non-iterable instance.
20:42:19.657 In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1
20:42:20.382 [Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'i18n._t')"
20:42:20.431 (found at pages/index/index.vue:1)
20:42:20.454 TypeError: undefined is not an object (evaluating 'i18n._t')

请问有解决方案吗?
2020-07-01 20:50
2***@qq.com

2***@qq.com

请问在nvue文件中怎么写呢?
2020-06-15 15:17
wwwwt

wwwwt

为什么我照这么做,一点效果都没。。。
2020-06-02 17:58
x***@163.com

x***@163.com

$t方法可用,不需要使用计算属性。
2020-05-29 10:23