electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法

系列文章目录

electron+vite+vue3 快速入门教程

文章目录

  • 系列文章目录
  • 前言
  • 一、实现过程
  • 二、代码演示
    • 1.resources/env.json
    • 2.App.vue
    • 3.main/index.js
    • 4.request.js
    • 5.安装后修改


前言

使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦。如果能在安装目录添加一个可配置文件,通过修改配置文件内容改变接口地址问题将迎刃而解。这里记录下一种实现方法。


一、实现过程

1、配置文件(json格式)放置resources资源文件夹下,将同步打包到应用内部,安装后可在安装目录找到
2、启动应用时在App.vue通知主进程通过node fs模块读取配置文件接口地址,并缓存到本地
3、接口请求封装文件(axios)baseURL从本地缓存获取

二、代码演示

1.resources/env.json

{"baseUrl":"http://192.168.2.xxx:xxxx"
}

新建一个json文件内置接口地址

2.App.vue

<script setup>
import { ref, onBeforeMount } from 'vue'
onBeforeMount(async () => {let url = await window.electron.ipcRenderer.invoke('baseUrl')if (url) {localStorage.setItem('baseUrl', url)}
})
</script>

应用启动开始时从主进程获取接口地址,缓存到本地localStorage(当然也可以选择缓存到pinia或vuex等)

3.main/index.js

const fs = require('fs');
//获取接口baseurl
ipcMain.handle('baseUrl',()=>{const rawData = fs.readFileSync(join(__dirname, '../../resources/env.json'),"utf-8");const config = JSON.parse(rawData);return config.baseUrl||''
})

主进程通过fs读取env.json内接口地址返回给渲染层

4.request.js

const baseURL = localStorage.getItem('baseUrl')??''
const http = axios.create({baseURL,timeout: 100000,..........
})
.....
.....

接口请求统一封装文件内,从缓存获取接口地址并设置

5.安装后修改

在这里插入图片描述

打开安装目录,在resources\app.asar.unpacked\resources文件夹下可找到env.json配置文件,修改完配置完全退出应用并重启生效

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

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

相关文章

思维导图如何用AI生成?借助这几款工具

思维导图如何用AI生成&#xff1f;在数字化时代&#xff0c;思维导图作为一种高效的信息组织与展示工具&#xff0c;被广泛应用于学习、工作和项目管理中。随着人工智能技术的飞速发展&#xff0c;AI生成思维导图已成为现实&#xff0c;极大地提升了创建思维导图的效率和创意。…

翻译《The Old New Thing》 - Restating the obvious about the WM_COMMAND message

Restating the obvious about the WM_COMMAND message - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20060302-10/?p32093 Raymond Chen 2006年03月02日 关于 WM_COMMAND 消息的显而易见的知识点补充 简要 本文详细解释了 WM_COMMAND 消息…

Django 静态文件管理与部署指南

title: Django 静态文件管理与部署指南 date: 2024/5/10 17:38:36 updated: 2024/5/10 17:38:36 categories: 后端开发 tags: WebOptCDN加速DjangoCompressWebpackStaticDeployCICD-ToolsSecStatic 第一章&#xff1a;介绍 Django 静态文件的概念和重要性 在 Web 开发中&a…

Linux diff命令(比较两个文件或目录的内容差异)

文章目录 Linux diff 命令详解教程基本用法比较文件输出解释 递归比较&#xff08;-r&#xff09;示例代码 控制输出格式统一格式&#xff08;-u&#xff09;上下文格式&#xff08;-c&#xff09; 高级选项忽略所有空白差异&#xff08;-w&#xff09;仅报告文件是否不同 Linu…

纯 CSS 实现标签自动显示超出数量

现代 CSS 强大的令人难以置信。 这次我们来用 CSS 实现这样一个功能&#xff1a;有多个宽度不同的标签水平排列&#xff0c;当外层宽度不足时&#xff0c;会提示超出的数量&#xff0c;演示效果如下 如果让我用 JavaScript来实现估计都有点折腾&#xff0c;毕竟宽度都是动态的…

有什么方便实用的黏土特效教程?6个软件教你快速进行特效制作

有什么方便实用的黏土特效教程&#xff1f;6个软件教你快速进行特效制作 作为时尚小达人&#xff0c;你自己是否想要制作出属于自己的黏土特效照片呢&#xff1f;比如下面几种。 看到这些黏土特效软件有没有心动&#xff0c;下面我也为大家详细的介绍一下可以制作出对应特效的…

Java 集合-List

集合主要分为两组(单列集合, 双列集合) Connection 接口有两个重要的子接口LIst 和 Set, 它们的实现子类都是单列集合, Map 接口的实现子类是双列集合, 存放的是 K-V Connection 接口 Collection 接口和常用方法 下面以 ArrayList 演示一下 add: 添加单个元素remove: 删除指…

Socket学习记录

本次学习Socket的编程开发&#xff0c;该技术在一些通讯软件&#xff0c;比如说微信&#xff0c;QQ等有广泛应用。 网络结构 这些都是计算机网络中的内容&#xff0c;我们在这里简单回顾一下&#xff1a; UDP(User Datagram Protocol):用户数据报协议;TCP(Transmission Contr…

这是一关于DSC相关的文档

这是一关于DSC相关的文档 上面这幅图清晰的展示了somewhat flat的像素图示

机器学习算法应用——关联规则分析(4-4)

关联规则分析&#xff08;4-4&#xff09; 关联规则分析&#xff08;Association Rule Mining&#xff09;是一种基于频繁项集的分析方法&#xff0c;它以最常出现在一起的元素之间的关系作为分析对象&#xff0c;主要用于发掘大数据中隐藏的关联规则&#xff0c;是数据挖掘技术…

小众行业风口:Q1季度擦窗机器人行业线上市场销售数据分析

今天给大家分享一个2024年的小众行业增长风口——擦窗机器人。 作为家居自动化里的重要一员&#xff0c;擦窗机器人可以简称为擦窗神器&#xff0c;是为了解决大户型家庭的外窗清洁痛点而存在。而目前&#xff0c;擦窗机器人行业正在走向成熟&#xff0c;且市场需求量居高不下…

苹果公司因iPad广告争议而道歉,承认“未达标”|TodayAI

周二&#xff0c;苹果公司发布了一则新的iPad Pro广告&#xff0c;引起了广泛争议&#xff0c;该公司随后发表道歉声明&#xff0c;承认这则广告“未达标”。这则名为“压碎&#xff01;”的广告意图展示全新的M4芯片iPad Pro的创意潜力&#xff0c;但却因其表现方式而备受批评…

设计模式学习笔记 - 回顾总结:在实际软件开发中常用的设计思想、原则和模式

概述 本章&#xff0c;先来回顾下整个专栏的知识体系&#xff0c;主要包括面向对象、设计原则、编码规范、重构技巧、设计模式五个部分。 面向对象 相对于面向过程、函数式编程&#xff0c;面向对象是现在最主流的编程范式。纯面向过程的编程方法&#xff0c;现在已经不多见了…

浅谈如何利用 AI 提高内容生产效率?|TodayAI

在数字化时代&#xff0c;内容的创建和分发速度变得尤为关键。人工智能&#xff08;AI&#xff09;技术提供了加速这一过程的可能性&#xff0c;不仅提升了生产效率&#xff0c;还改善了内容的质量和受众的接受度。本文深入探讨AI如何在内容生成、分发与推广&#xff0c;以及内…

LangChain连接国内大模型测试|智谱ai、讯飞星火、通义千问

智谱AI 配置参考 https://python.langchain.com/v0.1/docs/integrations/chat/zhipuai/ZHIPUAI_API_KEY从https://open.bigmodel.cn/获取 from langchain_community.chat_models import ChatZhipuAI from langchain_core.messages import AIMessage, HumanMessage, SystemMes…

超越机械抓手:看多指机器人如何灵活运用触觉?

论文标题&#xff1a; Learning Visuotactile Skills with Two Multifingered Hands 论文作者&#xff1a; Toru Lin, Yu Zhang, Qiyang Li, Haozhi Qi, Brent Yi, Sergey Levine, and Jitendra Malik 1. 机器人新挑战&#xff1a;多指手指操作 在自动化和智能化日益普及的…

idea导入jar包、打jar包

一、导入jar包 1.在工程下面新建一个lib目录&#xff0c;将jar包放在lib目录下面 2.按步骤导入jar包 -接下来选择jar包所在的位置进行导入 -下图中标红框位置就是刚刚导入的jar包 二、直接用idea打jar包 -下图中Main Class就是选择程序中的Main函数 -右侧标红框位置表示…

VSCode Python 自动格式化代码(black)不生效

弄了很长时间&#xff0c;各种尝试&#xff0c;就想实现保存后自动格式化代码&#xff0c;用户设置&#xff0c;工作区设置&#xff0c;因为环境较多以为有啥冲突&#xff0c;就是没找到。后来看到一条评论说Python版本低&#xff0c;想到了版本问题。然后就看到以下描述 记录…

Spring如何控制Bean的加载顺序

前言 正常情况下&#xff0c;Spring 容器加载 Bean 的顺序是不确定的&#xff0c;那么我们如果需要按顺序加载 Bean 时应如何操作&#xff1f;本文将详细讲述我们如何才能控制 Bean 的加载顺序。 场景 我创建了 4 个 Class 文件&#xff0c;分别命名为 FirstInitialization Se…

python数据分析——数据的选择和运算

数据的选择和运算 前言一、数据选择NumPy的数据选择一维数组元素提取示例 多维数组行列选择、区域选择示例 花式索引与布尔值索引布尔索引示例一示例二 花式索引示例一示例二 Pandas数据选择Series数据获取DataFrame数据获取列索引取值示例一示例二 取行方式示例loc() 方法示例…