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

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

要回复文章请先登录注册

j***@qq.com

j***@qq.com

i18n 它支持动态替换参数
目前使用来看无法支持{}占位符替换参数
2023-11-17 18:40
q***@qq.com

q***@qq.com

回复 s***@126.com :
你好,大神,看到官方文档说,框架内置如下语言
英语 en
中文简体 zh-Hans
繁体 zh-Hant
法语 fr
西班牙语 es
若我想要支持日语或者其他语言,该如何做?
2021-11-22 11:28
s***@126.com

s***@126.com

回复 q***@qq.com :
这个不是国际化技术的范畴,需要接口返回对应语言的内容
2021-11-19 15:27
8***@qq.com

8***@qq.com

云打包后不显示文字了,有遇到的吗
2021-10-19 09:16
4***@qq.com

4***@qq.com

vuex中的文本内容如何使用i18n做多语言处理?因为我的vuex中是有部分提示框之类的内容存在
2021-10-19 04:26
q***@qq.com

q***@qq.com

前端界面是国际化了,但是后台回复的数据,如何做到国际化?
2021-10-18 10:53
4***@qq.com

4***@qq.com

感谢文章,想请教一下,i18n怎么实现占位替换?
2021-10-04 00:28
Kytrun

Kytrun

感谢,参考你得文章写了一个 vue 和 nvue 的通用 Demo,<https://ext.dcloud.net.cn/plugin?id=2852>
2020-11-27 10:41
1***@qq.com

1***@qq.com

const i18n = new VueI18n({
locale: 'en-US', 我把locale换成zh-CN 页面还是取得英文的,第二,运行在真机上显示不出来,小程序没有问题
2020-11-26 22:21
1***@qq.com

1***@qq.com

发现一个很神奇的bug,我无论怎么切换local都是取得英文的
2020-11-26 22:19