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')">Englishview>
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，方便多个页面调用切换。