在uniapp中实现中英文切换的方法

npm install vue-i18n

export default {
	common:{
		switch:'切换语言',
		setting:'设置中心',
		back:'返回',
		account:'账号',
		login:'登录',
		password:'密码'
	}
}

export default {
	common:{
		switch:'Switch language',
		setting:'Setting',
		back:'Back',
		account:'Account',
		login:'Login',
		password:'Password'
	}
}

import VueI18n from 'vue-i18n'
import zh from './common/util/zh.js'
import en from './common/util/en.js'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 默认语言为英文
  messages: {
    en,
    zh
  }
})

new Vue({ 
    i18n, 
    // 其他配置... 
    }).$mount('#app')

<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">{{$t('common.back')}}</block>
				<block slot="content">{{$t('common.setting')}}</block>
				<!-- <view slot="right"  @tap="rightClick">编辑</view> -->
			</cu-custom>
			<uni-section :title="$t('common.switch')" type="line">
				<view class="uni-px-5 uni-pb-5">
					<uni-data-checkbox v-model="lang" :localdata="items" @change="checkChange"></uni-data-checkbox>
				</view>
			</uni-section>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				items: [{
						value: 'en',
						text: 'English'
					},
					{
						value: 'zh',
						text: '中文简体'
					}
				],
				lang: 'en'
			};
		},
		onLoad() {},
		methods: {
			checkChange: function(evt) {
				this.$i18n.locale = evt.detail.value;
			},
		}
	}
</script>

<template>
  <view>
    <text>{{ $t('common.switch') }}</text> <!-- 使用 $t 方法获取对应语言的文本 -->
  </view>
</template>

this.loginText = this.$t('common.login')