uniapp多语言实现

项目使用vue-i18n实现国际化多语言
npm install vue-i18n

//main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'

//多语言引入
import VueI18n from './libs/vue-i18n'
import en from './common/js/en.js'//英文
import cn from './common/js/cn.js'//中文
Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: uni.getStorageSync('lang') ? uni.getStorageSync('lang') : 'zh-CN', //当前语言中文;
	// locale:'en',
	messages: {
		'en': en,
		'zh-CN': cn,
	}
})
const app = new Vue({
    i18n,
    ...App
})
app.$mount()

cn.js，en.js结构如下

//cn
export default {
    message: {
        home:"首页",
	}
}

//en
export default {
    message: {
        home:"home",
	}
}

在页面中使用

<template>  
	<view>  
    	<text>{{$t('message.home')}}</text>  
	</view>  
</template>  

切换语言

data() {
	return {
		language:'zh-CN',
	}
},
onShow(){
	// 判断是否已经有设置过语言
	if (uni.getStorageSync('lang')) {
		this.language = uni.getStorageSync('lang')
		//修改tabbar文字
		uni.setTabBarItem({
			index: 0,
			text: this.$t('tabbar.tabbar1'),
		})
		uni.setTabBarItem({
			index: 1,
			text: this.$t('tabbar.tabbar2'),
		})
		uni.setTabBarItem({
			index: 2,
			text: this.$t('tabbar.tabbar3'),
		})
	}
},
methods: {
	//切换语言
	change_language(text) {
		if (this.language == 'en') {
			this.$i18n.locale = 'zh-CN';
			this.language = 'zh-CN'
		} else {
			this.$i18n.locale = 'en';
			this.language = 'en'
		}
		uni.setStorageSync('lang', this.$i18n.locale)
		uni.setTabBarItem({
			index: 0,
			text: this.$t('tabbar.tabbar1'),
		})
		uni.setTabBarItem({
			index: 1,
			text: this.$t('tabbar.tabbar2'),
		})
		uni.setTabBarItem({
			index: 2,
			text: this.$t('tabbar.tabbar3'),
		})
	},
}

2020.6.13更新：

uni-app 自 3.1.5起，App 和 H5 支持框架国际化。
可以在HBuilderX新建项目里选择Hello i18n示例或者插件市场查看https://ext.dcloud.net.cn/plugin?id=6462

总结下最新版本使用多语言的教程（已经不再需要npm install vue-i18n）：

1、创建多语言json文件，

// en.json
{
	"tabbar1": "Home",
	"tabbar2": "Assets",
	"tabbar3": "Mine"
}
// zh-Hans.json
{
	"tabbar1": "首页",
	"tabbar2": "资产",
	"tabbar3": "我的"
}
// index.js
import en from './en.json'
import zhHans from './zh-Hans.json'
export default {
	en,
	'zh-Hans': zhHans,
}

2、main.js

import messages from './locale/index'
let i18nConfig = {
	locale: uni.getLocale(),
	messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
const app = new Vue({
    ...App,
	i18n,
})
app.$mount()

3、页面切换语言，展示默认语言

<h1>{{$t('tabbar1')}}</h1>
<h1>当前语言：{{applicationLocale}}</h1>
<button @click="onLocaleChange('en')">切换英文</button>
<button @click="onLocaleChange('zh-Hans')">切换中文</button>

data() {
	return {
		applicationLocale:'',
	}
},
onShow() {
	this.applicationLocale = uni.getLocale(); // 当前语言
	// 用于监听应用语言切换，也可吧切换后的值存入本地，方便其他地方调用
	uni.onLocaleChange((e) => {
		this.applicationLocale = e.locale;
		this.$i18n.locale = e.locale;
		uni.setStorageSync('locale', e.locale);
	})
},
methods: {
	// 切换语言
	onLocaleChange(e) {
		console.log(e);
		uni.showModal({
			content: '应用此设置将重启App',
			success: (res) => {
				if (res.confirm) {
					uni.setLocale(e);
				}
			}
		})
	},
}

4、pages.json

locale目录下 语言地区代码.json 文件中定义的 key，使用 %% 占位

"tabBar": { // 设置底部 tab 的表现
	"color": "#848F9F",
	"selectedColor": "#38404D",
	"borderStyle": "black",
	"backgroundColor": "#fff",
	"list": [{
		"pagePath": "pages/assets/assets",
		"iconPath": "static/icon/3.png",
		"selectedIconPath": "static/icon/3-3.png",
		"text": "%tabbar1%"
	}, {
		"pagePath": "pages/mill/mill",
		"iconPath": "static/icon/2.png",
		"selectedIconPath": "static/icon/2-2.png",
		"text": "%tabbar2%"
	}, {
		"pagePath": "pages/index/index",
		"iconPath": "static/icon/1.png",
		"selectedIconPath": "static/icon/1-1.png",
		"text": "%tabbar3%"
	}]
}

官方文档参考地址