uniapp 实现多语言切换

先在项目安装 npm install vue-i18n

在根目录新建common/locales/zh.js和common/locales/en.js

//zh.js
export default {
	login: {
		title:'登录',
		register: '注册'
	}
}


//en.js
export default {
	login: {
		title:'Login',
		register: 'Register'
	}
}

在main.js引入

// 引入并使用vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入语言包，注意路径
import Chinese from '@/common/locales/zh.js'; //简体中文
import English from '@/common/locales/en.js'; //英文

// 构造i18n对象
const i18n = new VueI18n({
	// 默认语言，这里的local属性，对应message中的cn、en属性
	locale: uni.getStorageSync('locale') || 'zh_CN',
	// 引入语言文件
	messages: {
		// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
		// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|cn|xxx
		'zh_CN': Chinese,
		'en_US': English
	}
})

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

页面使用index.vue

<view>
	//登录
	<view>{{$t('login.title')}}</view>
	//注册
	<view>{{$t('login.register')}}</view>
	//语言选择
	<view v-for="(item, index) in lans" :key="index" @click="onLans(index)">
		{{ item.name }}
	</view>
</view>


data(){
		lans: [{
						name: '中文'
					},
					{
						name: 'English'
					}
			]
},
onShow(){
	if (uni.getStorageSync('locale') == 'en_US') {
				this.$i18n.locale = 'en_US';
			} else {
				this.$i18n.locale = 'zh_CN';
			}
},
methods: {
//切换语言事件 
	onLans(index ){
		if (index == 0) {
					this.$i18n.locale = 'zh_CN';
					uni.setStorageSync('locale', 'zh_CN');
				} else if (index == 1) {
					this.$i18n.locale = 'en_US';
					uni.setStorageSync('locale', 'en_US');
				}
	}
}

完结撒花