uni-App + vue3 配置国际化并实现切换

一.导库

npm install vue-i18n   //npm

yarn add vue-i18n    //yarn

二.根目录下创建国际化所需的文件

1.三个语言js文件配置对应的语言，这里选择中文简体，中文繁体，英语作为示例

 

2.index.js 负责引入这三个语言文件并进行导出，方便后续main.js调用

三.main.js文件引用 

这样一来配置方面就完成了，然后就是调用

四.调用 

pages.json调用，改成你在语言文件中设置的共同变量名

pages view页面调用

js中调用

<script setup>
//引入全局变量
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

//获取当前的语言
let locale = uni.getLocale();  
//获取当前语言下所设定的变量名的值 这里选的是index.login.account（就是你语言文件起的那些变量名）
let accountContent = proxy.$i18n.messages[locale]["index.login.account"]; 
console.log("賬戶"); //假如当前是繁体 就会打印zh.hant繁体语言文件下的index.login.account的值
</script>

切换语言

<script setup>
//引入全局变量
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

let e = 'en'; //假定要修改为英文
uni.setLocale(e); //修改本地语言选择
proxy.$i18n.locale = e; //更新全局下的语言文件 否则页面引用的文字不会响应更新为对应的选择的语言
</script>

—————————————— 大致就是这样，并不复杂