一.导库

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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐