您现在的位置是:网站首页> 小程序设计

uniapp与vue-i18n实现国际化多语言

摘要

踩了很多坑,终于捣鼓出来了。可能是由于内容开始是网络地址(http://...)截取后不能换行造成 为避免代码造成手机端排版的混乱,可适当增加文字描述,将代码往后推移

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>


上一篇:uniapp编译相关

下一篇:uniapp 内置Page API

Top