uniapp多语言实现（一）

uniapp多语言切换

main.js

import Vue from 'vue'    
import App from './App'    
import VueI18n from 'vue-i18n'    

Vue.use(VueI18n)    

const i18n = new VueI18n({    
  locale: 'en-US',    
  messages: {    
    'en-US': {    
      index: {    
        invite: 'Invite',    
        game: 'Game'    
      }    
    },    
    'zh-CN': {    
      index: {    
        invite: '邀请',    
        game: '游戏'    
      }    
    }    
  }    
})    

Vue.prototype._i18n = i18n    
Vue.prototype.$i18nMsg = function(){  
    return i18n.messages[i18n.locale]  
}  

const app = new Vue({    
  i18n,    
  ...App    
})    
app.$mount()  

index.vue

<template>  
    <view class="content">  
        <view class="content-title">{{ i18n.index.invite }}</view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        computed: {  
            i18n() {  
                return this.$i18nMsg()  
            }  
        },  
        onLoad() {  
            setTimeout(() => {  
                this.$i18n.locale = 'zh-CN'  
            },2000)  
        },  
        methods: {  

        }  
    }  
</script>  

<style lang="stylus" rel="stylesheet/stylus">  
    .content-title  
        color #500778  
</style>