uni-App + vue3 配置国际化并实现切换
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一.导库
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>
—————————————— 大致就是这样,并不复杂
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)