uniapp 国际化

安装vue-i18n

npm install vue-i18n --save

main.js 加上以下配置

import VueI18n from 'vue-i18n'
import messages from './util/lang.js'
Vue.use(VueI18n)  


const i18n = new VueI18n({
	locale: 'zh-CN',
	messages
})

Vue.prototype._i18n = i18n  


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

App.vue 在onLaunch方法中加

• 获取设备信息 uni.getSystemInfoSync()
• 底部导航栏设置 setTabBarItem

            let lang = 'zh'
			try {
				const res = uni.getSystemInfoSync();
				lang = res.language
			} catch (e) {}

			if (lang.indexOf('en') !== -1) {
				this._i18n.locale = 'en-US'
			}
			if (lang.indexOf('zh') !== -1) {
				this._i18n.locale = 'zh-CN'
			}

			uni.setTabBarItem({
				index: 0,
				text: this.$t('home')
			})

			uni.setTabBarItem({
				index: 1,
				text: this.$t('product')
			})

			uni.setTabBarItem({
				index: 2,
				text: this.$t('statistics')
			})

			uni.setTabBarItem({
				index: 3,
				text: this.$t('my')
			})

lang.js

export default {
	'zh-CN': {
		lang: 'zh',
		home: '首页',
		product: '商品',
		statistics: '统计',
		my: '我的',
		loading: '正在加载...',
		productList: '商品列表',
		productAdd: '添加商品',
		defaultOrder: '默认排序',
		defaultAscOrder: '默认正序',
		defaultDescrder: '默认倒序',
	},
	'en-US': {
		lang: 'en',
		home: 'home',
		product: 'product',
		statistics: 'statistics',
		my: 'my',
		loading: 'loading...',
		productList: 'ProductList',
		productAdd: 'ProductAdd',
		defaultOrder: 'DefaultOrder',
		defaultAscOrder: 'DefaultAscOrder',
		defaultDescOrder: 'DefaultDescOrder',
	},
}