uniapp vue2版本如何设置i18n

如何设置i18n在该软件设置过语言的情况下优先选择所设置语言,在没有设置的情况下,获取本系统默认语言就,将系统默认语言设置为当前选择语言。

1、下载依赖:

npm install vue-i18n --save

2、创建相关文件(在最外层,与main.js平级)

3、en文件下:

{"pageJson.switchLanguage": "Switch Language","checkLanguage.chinese": "Chinese","checkLanguage.russian": "Russian","checkLanguage.english": "English","checkLanguage.auto": "Automatic","checkLanguage.applicationLanguage": "Current language:","checkLanguage.language": "Switch Language:","checkLanguage.restartApp": "Applying this setting will restart the app"
}

4、zh_CN文件:

{"pageJson.switchLanguage": "切换语言","checkLanguage.chinese": "中文","checkLanguage.russian": "俄语","checkLanguage.english": "英文","checkLanguage.auto": "自动","checkLanguage.applicationLanguage": "当前语言:","checkLanguage.language": "语言","checkLanguage.restartApp": "应用此设置将重启App"
}

5、index文件:

import en from './en.json'
import zh_CN from './zh_CN.json'export default {en,'zh_CN': zh_CN
}

6、main.js文件:(locale取值逻辑为:优先获取locastorage中的值,如果locastorage中不存在,获取当前系统的值并赋值)

import Vue from 'vue'
import App from './App'import uView from "uview-ui";
Vue.use(uView);import messages from './local/index.js'
let i18nConfig = {// locale: uni.getLocale(),locale: uni.getStorageSync('locale') != null && uni.getStorageSync('locale') != undefined && uni.getStorageSync('locale') != '' ? (uni.getStorageSync('locale').startsWith('zh') ? 'zh_CN' : 'en') : (uni.getLocale().startsWith('zh') ? 'zh_CN' : 'en'),messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({i18n,...App
})
app.$mount()

7、将时区和uniapp当前所选择的值放入请求头中(cookie字段uniapp请求头回自动屏蔽,所以设置为其他字段传给后端)

时区获取使用moment-timezone,三方插件(具体使用请查看我的另外一篇文章:https://blog.csdn.net/xiao_qiang666/article/details/144984641?spm=1001.2014.3001.5502)

import moment from 'moment-timezone';const timeZone = moment.tz.guess();
let localLanguage = uni.getStorageSync('locale');
let cookieObj = null
if (localLanguage && localLanguage == 'zh_CN') {cookieObj = 'za-language=zh-CN; timeZone=' + timeZone
} else if (localLanguage && localLanguage == 'en') {cookieObj = 'za-language=en_US; timeZone=' + timeZone
} else {let systemInfo = uni.getSystemInfoSync();let systemLocale = systemInfo.language;if (systemLocale && systemLocale == 'zh-CN') {cookieObj = 'za-language=zh_CN; timeZone=' + timeZone} else {cookieObj = 'za-language=en_US; timeZone=' + timeZone}}//以其中一个为例
let _get = function(url, obj, callback) {return ajax({method: 'GET',header: {'content-type': 'multipart/form-data; boundary=XXX','cache-control': 'no-cache','xcookie': cookieObj,'Authorization': 'Bearer ' + uni.getStorageSync('token'),},url: url,data: utils.formatForm(obj),success: function(res) {// let pages = getCurrentPages();if (res.code === 200) {callback && callback(res);}}})
}

8、语言切换页面:
 

<template><view class="container"><view class="card_container"><view class="list-item"><text class="k">{{$t(`checkLanguage.applicationLanguage`)}}</text><text class="v">{{applicationLocale.startsWith('zh')?'中文':'English' }}</text></view><view class="locale-setting">{{$t(`checkLanguage.language`)}}</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><text class="icon-check" v-if="item.code == applicationLocale"></text></view></view></view></view>
</template><script>export default {data() {return {systemLocale: '',applicationLocale: '',curChange: null}},computed: {locales() {return [{text: this.$t('checkLanguage.auto'), //自动code: 'auto'}, {text: "English",code: 'en'},{text: "中文",code: 'zh_CN'}]}},onLoad() {let systemInfo = uni.getSystemInfoSync();this.systemLocale = systemInfo.language;this.applicationLocale = uni.getLocale();this.isAndroid = systemInfo.platform.toLowerCase() === 'android';uni.onLocaleChange((e) => {this.applicationLocale = e.locale;})},methods: {onLocaleChange(e) {if (this.isAndroid) {uni.showModal({content: this.$t(`checkLanguage.restartApp`),success: (res) => {if (res.confirm) {uni.setLocale(e.code);uni.setStorageSync('locale', e.code);this.$i18n.locale = e.code;}}})} else {uni.setLocale(e.code);this.$i18n.locale = e.code;}}}}
</script><style>.container {height: 100vh;padding: 20% 10%;display: flex;justify-content: center;}.card_container {height: 500upx;width: 100%;background-color: #FFF;padding: 8%;border-radius: 24upx;}.title {font-size: 16px;font-weight: bold;margin-bottom: 15px;}.description {font-size: 14px;opacity: 0.6;margin-bottom: 15px;}.detail-link {font-size: 14px;word-break: break-all;}.link {color: #007AFF;margin-left: 10px;}.locale-setting {font-size: 16px;font-weight: bold;margin-top: 25px;margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid #f0f0f0;}.list-item {font-size: 14px;padding: 10px 0;}.list-item .v {margin-left: 5px;}.locale-item {display: flex;flex-direction: row;padding: 10px 0;}.locale-item .text {flex: 1;}.icon-check {margin-right: 5px;border: 2px solid #007aff;border-left: 0;border-top: 0;height: 12px;width: 6px;transform-origin: center;/* #ifndef APP-NVUE */transition: all 0.3s;/* #endif */transform: rotate(45deg);}
</style>

9、page.json中使用:

代码:

"%pageJson.signOut%"

10、正常页面中使用:

template中:{{$t(`measure.concentration`)}}
script中:this.$t(`measure.linkDevice`)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/504033.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QPS和TPS 的区别是什么?QPS 大了会有什么问题,怎么解决?

QPS 和 TPS 的区别是什么&#xff1f;QPS 大了会有什么问题&#xff0c;怎么解决&#xff1f; QPS&#xff08;Queries Per Second&#xff09;和 TPS&#xff08;Transactions Per Second&#xff09;都是衡量系统性能的重要指标&#xff0c;尤其是在 Web 服务、数据库和分布…

《Spring Framework实战》4:Spring Framework 文档

欢迎观看《Spring Framework实战》视频教程 概述 历史&#xff0c; 设计理念&#xff0c; 反馈&#xff0c; 开始。 核心技术 IoC 容器、事件、资源、i18n、 验证、数据绑定、类型转换、SpEL、AOP、AOT。 测试 Mock 对象、TestContext 框架、 Spring MVC 测试&#xff0c;…

经典多模态模型CLIP - 直观且详尽的解释

对比语言-图像预训练&#xff08;CLIP&#xff09;&#xff0c;这是一种创新的多模态建模策略&#xff0c;能够创建视觉和语言的联合表示。CLIP 的效果非常出色&#xff0c;可以用于构建高度特定且性能卓越的分类器&#xff0c;而无需任何训练数据。本文将深入探讨其理论基础&a…

vulnhub靶场【DC系列】之7

前言 靶机&#xff1a;DC-7&#xff0c;IP地址为192.168.10.13 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.2 都采用VMWare&#xff0c;网卡为桥接模式 对于文章中涉及到的靶场以及工具&#xff0c;我放置在网盘中&#xff0c;链接&#xff1a;https://pan.quark…

内网基础-防火墙-隧道技术

内网对抗-网络通讯篇&防火墙组策略&入站和出站规则&单层双层&C2正反向上线 关闭第一个防火墙&#xff1a; 第一个上线就走反向或者正向 第二个上线走反向&#xff08;第二个防火墙阻止入站&#xff09; 关闭第二个防火墙&#xff1a; 第一个上线就走反向&a…

BGP的local_preference本地优先级属性

一、BGP的local preference属性简介 1、local preference公认任意属性 当一条BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由属性进行比较&#xff0c;从而筛选出最佳到达目标网络的通达路径。本地优先属性&#xff0c;只在IBGP对等体之间…

从零手写线性回归模型:PyTorch 实现深度学习入门教程

系列文章目录 01-PyTorch新手必看&#xff1a;张量是什么&#xff1f;5 分钟教你快速创建张量&#xff01; 02-张量运算真简单&#xff01;PyTorch 数值计算操作完全指南 03-Numpy 还是 PyTorch&#xff1f;张量与 Numpy 的神奇转换技巧 04-揭秘数据处理神器&#xff1a;PyTor…

如何让用户在网页中填写PDF表格?

在网页中让用户直接填写PDF表格&#xff0c;可以大大简化填写、打印、扫描和提交表单的流程。通过使用复选框、按钮和列表等交互元素&#xff0c;PDF表格不仅让填写过程更高效&#xff0c;还能方便地在电脑或移动设备上访问和提交数据。 以下是在浏览器中显示可填写PDF表单的四…

【和春笋一起学C++】文本输入与读取(二)

目录 使用cin.eof()或cin.fail()检测EOF 使用cin.get(ch)的返回结果检测EOF 使用cin.get()的返回结果检测EOF 上篇文章《文本输入与读取》学习了遇到某个字符时停止读取&#xff0c;那如果要读取键盘输入的所有字符该怎么做呢。答案是检测文件尾&#xff08;EOF&#xff09;…

Ungoogled Chromium127 编译指南 MacOS篇(八)- 开始编译

1. 引言 完成了所有依赖包的安装后&#xff0c;我们终于来到了最关键的编译阶段。在开始编译之前&#xff0c;有一些重要的配置信息需要了解。本文将指导您完成整个编译过程。 2. 签名相关说明 虽然在我们的测试编译中不需要进行签名操作&#xff0c;但了解官方的签名要求仍…

Jenkins内修改allure报告名称

背景&#xff1a; 最近使用Jenkins搭建自动化测试环境时&#xff0c;使用Jenkins的allure插件生成的报告&#xff0c;一直显示默认ALLURE REPORT&#xff0c;想自定义成与项目关联的名称&#xff0c;如图所示&#xff0c;很明显自定义名称显得高大上些 本地修改方法&am…

关于物联网的基础知识(二)——物联网体系结构分层

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于物联网的基础知识&#xff08;二&a…

应急响应——Windows / Linux 排查笔记

一、基本思路流程 收集信息&#xff1a;收集客户信息和中毒主机信息&#xff0c;包括样本判断类型&#xff1a;判断是否是安全事件&#xff0c;何种安全事件&#xff0c;勒索、挖矿、断网、DoS 等等抑制范围&#xff1a;隔离使受害⾯不继续扩⼤深入分析&#xff1a;日志分析、…

Git撤销指定commit并更新远端仓库

Git撤销指定commit并更新远端仓库 一、撤销指定commit 1.首先执行git log 命令&#xff0c;查看git历史提交以及commit信息&#xff1a; 由于需要脱敏&#xff0c;所以截图可能看得马赛克比较多&#xff0c;需要关注的就是上面的commit后跟的id&#xff0c;以及HEAD当前指定…

C 语言奇幻之旅 - 第16篇:C 语言项目实战

目录 引言1. 项目规划1.1 需求分析与设计1.1.1 项目目标1.1.2 功能需求1.1.3 技术实现方案 2. 代码实现2.1 模块化编程2.1.1 学生信息模块2.1.2 成绩管理模块 2.2 调试与测试2.2.1 调试2.2.2 测试2.2.4 测试结果 3. 项目总结3.1 代码优化与重构3.1.1 代码优化3.1.2 代码重构 3.…

2025最新解决方案:新买的mac鼠标和这个触控板反向

solution1 &#xff1a;1.打开设置&#xff0c;搜索 触控 点击 自然滚动 ----->解决的是 触控板 但是还是解决不了鼠标反向的问题 solution1 ultra&#xff1a; 下载一个免费 且纯净的 软件 Scroll Reverser for macOS 这是给出的链接&#xff0c;非常简单&#xff0c;…

黄仁勋CES 2025演讲重点内容

黄仁勋CES 2025演讲重点内容 硬件产品发布 GeForce RTX 50系列GPU&#xff1a; 架构与性能提升&#xff1a;正式发布的新一代GeForce RTX 50系列GPU采用英伟达旗舰的Blackwell架构&#xff0c;这是自25年前引入可编程着色技术以来计算机图形领域最重大的创新。该系列显卡在图形…

机器学习免费使用的数据集及网站链接

机器学习领域存在许多可以免费使用的数据集&#xff0c;这些数据集来自于学习、研究、比赛等目的。 一、综合性数据集平台 1.Kaggle 网址&#xff1a;Kaggle 数据集https://www.kaggle.com/datasets Kaggle是一个数据科学竞赛和社区平台&#xff0c;提供了大量的数据集供用…

nodejs的降级

不使用nvm&#xff0c;直接使用zip包和手动配置环境变量。 下载相关的zip版本的&#xff0c; 解压相关文件&#xff0c;配置系统环境变量PATH&#xff0c;安装的其他的都不用修改 修改系统变量中的path值&#xff0c;重启下电脑 注意要重启idea&#xff0c;如果还是无效&…

ASP.NET Core 实现微服务 - Elastic APM

这次要给大家介绍的是Elastic APM &#xff0c;一款应用程序性能监控组件。APM 监控围绕对应用、服务、容器的健康监控&#xff0c;对接口的调用链、性能进行监控。在我们实施微服务后&#xff0c;由于复杂的业务逻辑&#xff0c;服务之间的调用会像蜘蛛网一样复杂。有了调用链…