1. 程式人生 > 其它 >uni-app 之官網uniapp與vue-i18n實現國際化多語言

uni-app 之官網uniapp與vue-i18n實現國際化多語言

原網頁網址:https://ask.dcloud.net.cn/article/35102

踩了很多坑,終於搗鼓出來了。

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>
有志者,事竟成,破釜沉舟,百二秦關終屬楚; 苦心人,天不負,臥薪嚐膽,三千越甲可吞吳。