npm i VueI18n

import Vue from 'vue'
import App from './App'
// 国际化
import messages from './locale/index'
let i18nConfig = {
  locale: uni.getLocale(),
  messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
 
Vue.config.productionTip = false
 

App.mpType = 'app'

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

import en from './en.json'
import zhHans from './zh-Hans.json' 
import vie from './vie.json'
export default {
	'zh-Hans': zhHans,
	en,
	vie
}

{
	"pageTitle.index": "首页",
	"pageTitle.setLanguage": "设置语言",
	"language":{
		"zh":"中文",
		"vie":"越南语",
		"en":"英语",
		"nowLanguage":"中文",
		"confirmcontent":"确认切换该语言吗",
		"setTitle":"当前系统语言"
	},
	"public":{
		"confirm":"确认",
		"cancellation":"取消"
	} 
	 
}

{
	"pageTitle.index": "Home page",
	"pageTitle.setLanguage": "Set Language",
	"language":{
		"zh":"Chinese",
		"vie":"Vietnamese",
		"en":"English",
		"nowLanguage":"English",
		"confirmcontent":"Are you sure to switch to this language",
		"setTitle":"Current system language"
	},
	"public":{
		"confirm":"confirm",
		"cancellation":"cancellation"
	}
}

{
	"pageTitle.index": "Home page",
	"pageTitle.setLanguage": "Set Language",
	"language":{
		"zh":"Chinese",
		"vie":"Vietnamese",
		"en":"English",
		"nowLanguage":"English",
		"confirmcontent":"Are you sure to switch to this language",
		"setTitle":"Current system language"
	},
	"public":{
		"confirm":"confirm",
		"cancellation":"cancellation"
	}
}

<template>
  <view class="container">
     
    <view class="locale-setting">{{$t('language.setTitle')}}:{{$t('language.nowLanguage')}}</view>
    <view class="locale-list">
      <view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
        <text class="text">{{item.text}}</text>
		<image src="../../../static/checked.png" mode="widthFix" v-show="applicationLocale==item.code"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        systemLocale: '',
        applicationLocale: ''
      }
    },
    computed:{
      locales() {
        return [  {
            text: this.$t('language.zh'),
            code: 'zh-Hans'
          }, {
            text: this.$t('language.en'),
            code: 'en'
          }, {
            text: this.$t('language.vie'),
            code: 'vie'
          }
        ]
      }
    },
    onLoad() {
      let systemInfo = uni.getSystemInfoSync();
      this.systemLocale = systemInfo.language;
      this.applicationLocale = uni.getLocale();
     
      uni.onLocaleChange((e) => {
        this.applicationLocale = e.locale;
      })
    },
    methods: {
      onLocaleChange(e) {
      
		  uni.showModal({
			content: this.$t('language.confirmcontent'),
			cancelText:this.$t('public.confirm'),
			confirmText:this.$t('public.cancellation'),
			success: (res) => {
			  if (res.confirm) {
				uni.setLocale(e.code);
			  }
			}
		  })
        
      }
    }
  }
</script>

<style lang="scss" scoped>
.container{
	padding: 20px;
	.locale-list{
		margin-top: 20rpx;
	}
	.locale-item{
		border-bottom: 1px solid #e6e6e6;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #333;
		padding: 5rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 25rpx;
			height: 25rpx;
		}
	}
	
	
}
</style>