uni-app i18n 国际化/多语言配置

基于uni-app的项目去配置多语言

首先在项目中安装vue-i18n

npm install vue-i18n

配置

main.js

import Vue from 'vue'  
import VueI18n from 'vue-i18n'  

Vue.use(VueI18n);
const i18n = new VueI18n({
	locale: 'zh-CN',
	messages: {
		'zh-CN': require('@/language/zh_CN.json'),
		'en-US': require('@/language/en_US.json'),
		//更多语言自定义添加
	}
});

App.mpType = 'app';
Vue.prototype._i18n = i18n;

var app = new Vue({
	i18n,
	...App
})

app.$mount()

编写相应的语言文件包

zh_CN.json

{
	"index": {
		"wallet": "钱包",
		"recharge": "充值",
		"gold_exchange": "金币兑换",
		"trading": "交易市场"
	}
}

en_US.json

{
	"index": {
		"wallet": "Wallet",
		"recharge": "Recharge",
		"gold_exchange":"Gold exchange",
		"trading": "Trading"
	}
}

在页面中的使用及调用

index.vue

<template>  
  <view class="uni-content">  
    <text>{{ i18n.wallet}}</text>  
    <text>{{ i18n.recharge}}</text>  
    <text>{{ i18n.gold_exchange}}</text>  
    <text>{{ i18n.trading}}</text>  
  </view>  
  <view @tap="tabLanguage('zh-CN')">简体中文</view>
  <view @tap="tabLanguage('en-US')">English</view>
</template>  

<script>  
export default {
	computed: {
		i18n() {
			return this.$t('index');
		}
	},
	methods: {
		tabLanguage(item){
			 this.$i18n.locale = item;
			 uni.setStorageSync('locale', item);//储存
		},
	}
}
</script>  

<style>  
</style>

以上就配置完成啦~
也可自己配置成全局调用的function，方便多个页面调用切换。