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

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

要回复文章请先登录注册

花朝十二

花朝十二

uni.showToast({
title: 'not open',
icon: 'none',
position: 'center'
});
请问这种提示里的title 的内容咋改
2019-07-29 17:15
996669

996669

回复 锦益 :
能说明一下 什么导致方法冲突了吗 我现在也是H5可以 但是APP不行 谢谢
2019-07-24 16:23
jtshushu

jtshushu

回复 DCloud_heavensoft :
现在多语言可以实现 在线打包吗
2019-07-23 10:52
jtshushu

jtshushu

回复 Liew :
你好 解决了吗 我也是遇到这个问题
2019-07-23 10:39
jtshushu

jtshushu

非常感谢您 提供方案 ,可是我遇到就一个问题,不知道各位是怎么解决呢,可以提供方案吗
'vue-i18n
说没引入

sdk uncaught third Error
Cannot find module 'vue-i18n'
Error: Cannot find module 'vue-i18n'

是的怎么解决呢
2019-07-23 10:39
Liew

Liew

回复 Liew :
加上 Vue.prototype._i18n = i18n 这句后,又报 this.$r is not a function. orz
2019-07-17 12:31
Liew

Liew

回复 Liew :
补充下环境信息 HBiuder X 2.0.7, "vue-i18n": "^8.12.0",
2019-07-17 12:08
Liew

Liew

回复 锦益 :
我照着帖子写的,h5正常运行;APP调试时报undefined is not an object (evaluating 'i18n._t'),打印this.$i18n 显示 undefined.
main.js 相关代码:
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const app = new Vue({
store,i18n,...App
})
2019-07-17 11:37
blueSky235

blueSky235

回复 3***@qq.com :
你解决了nvue国际化的问题吗
2019-07-01 17:58
1***@qq.com

1***@qq.com

filter过滤器中如何使用vue-i18n进行多语言的国际化翻译
2019-06-26 11:16