Ste7en
Ste7en
  • 发布:2018-10-17 16:49
  • 更新:5 天前
  • 阅读:5650

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

9 关注 分享
Geeker Trust 春秋战国 sonicsunsky@qq.com meHaoTian 易齐 asdadad啊的 913360226@qq.com 没得好名字

要回复文章请先登录注册

Liew

Liew

回复 辉一:
对我当时也是少这一句:Vue.prototype._i18n = i18n
5 天前
辉一

辉一

回复 辉一:
解决了。。。自己回来填坑
就差了这句Vue.prototype._i18n = i18n
6 天前
辉一

辉一

回复 Liew:
大哥,你这个问题得到解决了吗?我也遇到这样的坑了,救救我
6 天前
辉一

辉一

真机测试的这个问题困扰了我很久,求大神帮忙解决
TypeError: undefined is not an object (evaluating 'i18n._t')
6 天前
花朝十二

花朝十二

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
1748557360@qq.com

1748557360@qq.com

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

1762842219@qq.com

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

602484728@qq.com

按照这样写可以成功渲染,但是遇到一个问题,我是通过picker来切换语言,但是在手机上运行只有第一次切换语言变化了,后来切换就不生效了,页面上代码:<picker @change="bindPickerChange" :value="index" :range="language">
<view class="changeLanguage flex-rowACJS">
<i class="iconfont iconzhankai"></i>
<text>{{language[index]}}</text>
</view>
</picker>
bindPickerChange (e) {
this.index = e.detail.value
console.log(this.index === 0)
this.index === 0 ? this._i18n.locale = 'zh-CN' : this._i18n.locale = 'en-US'
console.log(this._i18n.locale)
}
烦请大神帮忙看看
2019-06-25 23:02
1762842219@qq.com

1762842219@qq.com

methods方法里怎么写
2019-06-21 17:58
908552993@qq.com

908552993@qq.com

更换语言后,需要重载页面吗?
2019-05-22 14:40
DCloud_heavensoft

DCloud_heavensoft

回复 Ste7en:
app名称的国际化需要离线打包,参考原生开发的做法
2019-04-24 03:40
Ste7en

Ste7en (作者)

回复 773677173@qq.com:
plus API 和 uni API 没有设置应用名称的API,所以名称用默认语言吧
2019-04-17 20:44
Ste7en

Ste7en (作者)

回复 tossAbout:
顶部: uni.setNavigationBarTitle({ title: this.$t('home') })

底部tabBar: uni.setTabBarItem({ index: 0, text: this.$t('home') })
2019-04-17 20:41
773677173@qq.com

773677173@qq.com

请问一下应用名称怎么实现国际化
2019-04-15 21:10
tossAbout

tossAbout

就是底部导航条和顶部导航条的文字怎么也实现语言切换
2019-04-15 15:48
tossAbout

tossAbout

为什么我导入
import VueI18n from 'vue-i18n'
总是报 文件查找失败
我确定我已经安装了
还有,底部导航条和顶部导航条的文字怎么修改
2019-04-15 15:47
366836631@qq.com

366836631@qq.com

nvue中如何用国家化呢
2019-04-09 08:32
锦益

锦益

回复 DCloud_heavensoft:
可以了,是我的问题,二个方法冲突了,结果H5可以,APP不行,又没报错,以为方法不行。
2019-04-02 16:12
DCloud_heavensoft

DCloud_heavensoft

回复 锦益:
可以。补充了文档
2019-04-02 07:02
锦益

锦益

这方法APP不能用吗?
2019-04-02 03:41
dc19901212

dc19901212

回复 Ste7en:
plus.nativeObj.View是只支持H5+吗?我在uniapp上好像没找到支持?
2019-03-30 11:08
Ste7en

Ste7en (作者)

回复 周建伟:
底部 tabBar 用 plus.nativeObj.View 绘制一个 NView 即可实现国际化
2019-03-20 20:01
2678573188@qq.com

2678573188@qq.com

可以自己写一个底部导航
2019-03-04 14:55
2678573188@qq.com

2678573188@qq.com

:placeholder="i18n.bindTel"这样没有警告
2019-03-04 10:56
2678573188@qq.com

2678573188@qq.com

回复 877703305@qq.com:
:placeholder="$t(i18n.account_placeholder)" 会有警告Value of key '请输入密码' is not a string!
2019-03-04 09:23
2678573188@qq.com

2678573188@qq.com

:placeholder="$t(i18n.account_placeholder)"报错
2019-03-04 09:22
沉默的大侠

沉默的大侠

回复 周建伟:
我也想知道。。。
2019-02-01 18:19
周建伟

周建伟

请问底部导航栏的国际化怎么处理?
2019-01-17 17:42
877703305@qq.com

877703305@qq.com

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

877703305@qq.com

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

hoey

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

553455177@qq.com

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

553455177@qq.com

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

春秋战国

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