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

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

要回复文章请先登录注册

1***@163.com

1***@163.com

说个最近遇到的问题,语言切换时,返回上个页面部分语言不切换的问题。看你是不是在data里写有多语言,有的话要在跳转到切换语言页面是关闭所有页面栈,切换完后再返回想要跳转的页面就会更新了
2020-04-28 18:22
英盟

英盟

直接引入 报错 文件查找失败:'vue-i18n' at main.js:9;要如何引入 有人知道吗
2020-04-21 19:03
果然多

果然多

微信小程序端报Cannot read property '_t' of undefined 请问这个怎么解决
2020-03-18 15:26
果然多

果然多

回复 3***@qq.com :
我也遇到这个问题了 请问你解决了嘛
2020-03-18 15:26
jiang2266028

jiang2266028

请问底部tabbar和顶部标题怎么进行中英文切换
2020-02-07 12:22
2***@qq.com

2***@qq.com

文件查找失败:'vue-i18n' at main.js:4 这怎么办
2020-01-22 11:26
塔罗纪

塔罗纪

nvue怎么使用 ?
2019-12-30 17:12
4***@qq.com

4***@qq.com

回复 4***@qq.com :
谢谢你的回复,我后来直接引用的,具体可以查看我的分享或者问答。感谢
2019-11-28 14:18
4***@qq.com

4***@qq.com

回复 4***@qq.com :
你试下在工程npm init,会生成package.json,然后在npm install vue-i18n'试试
2019-11-26 11:25
k***@163.com

k***@163.com

回复 辉一 :
我也是少了这句
2019-11-23 01:44