1.App.vue

<template>
	<view class="content">
		<navigator url="/pages/index/index">{{ $t('home') }}</navigator>
		<button @click="changeLanguage('zh')">中文</button>
		<button @click="changeLanguage('en')">English</button>
	</view>
</template>

<script>
	import { i18n } from './lang/i18n.js'
	export default {
		data() {
			return {}
		},
		methods: {
			changeLanguage(lang) {
				this.$i18n.locale = lang;
				uni.setStorageSync('language', lang);
			}
		}
	}
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100rpx;
}
button {
	margin: 20rpx;
	width: 200rpx;
}
</style>

2.index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
 
Vue.use(VueI18n)
 
const lang = uni.getStorageSync('language') || 'zh'
 
//创建i18n实例
const i18n = new VueI18n({
  legacy: true, // nvue 必须开启兼容模式
  locale: lang,  //当前语言
  fallbackLocale: 'zh',  //默认语言,指定语言不存在时使用
  messages: {
    'zh': zh,
    'en': en
  }
})

// 新增这一行：把翻译方法挂载到uni全局，让nvue页面可以访问
// 【关键】全局挂载所有i18n相关能力，vue和nvue都可以用
uni.$i18n = i18n
uni.$t = (key) => i18n.t(key)
// 封装全局切换语言方法，不用每个页面都写重复逻辑
uni.switchLanguage = (lang) => {
  uni.setStorageSync('language', lang)
  i18n.locale = lang
}
 
 
export default i18n

3.en.js和zh.js

export default {
	setting: {
		hello: 'Hello World',
		language: 'Language',
	}
};

export default {
	setting: {
		hello: '你好，世界',
		language: '语言',
	}
};

4.main.js中修改如下

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

5.语言切换

this.$i18n.locale = 'zh';
uni.setStorageSync('language', 'zh');
或
this.$i18n.locale = 'en';
uni.setStorageSync('language', 'en');

6.在<script>中实现切换。

		onLoad() {
	
			this.$i18n.locale = uni.getStorageSync('language');
			this.Modelstate=this.$t('setting.language');

			// nvue文件适用,需要重启应用
			// uni.switchLanguage(uni.getStorageSync('language') || 'zh');
            // uni.$t = (key) => i18n.t(key);
            // console.log('uni.$t 挂载成功', uni.$t) // 加这行，运行项目看控制台有没有输出
		},