专业的高密做网站的,优化型网站建设,横沥网站设计,html模板网站模板下载系列文章目录
electronvitevue3 快速入门教程 文章目录 系列文章目录前言一、实现过程二、代码演示1.resources/env.json2.App.vue3.main/index.js4.request.js5.安装后修改 前言
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包#xff0c;对于多环境…系列文章目录
electronvitevue3 快速入门教程 文章目录 系列文章目录前言一、实现过程二、代码演示1.resources/env.json2.App.vue3.main/index.js4.request.js5.安装后修改 前言
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包对于多环境切换或者频繁变更接口地址就显得麻烦。如果能在安装目录添加一个可配置文件通过修改配置文件内容改变接口地址问题将迎刃而解。这里记录下一种实现方法。 一、实现过程 1、配置文件json格式放置resources资源文件夹下将同步打包到应用内部安装后可在安装目录找到 2、启动应用时在App.vue通知主进程通过node fs模块读取配置文件接口地址并缓存到本地 3、接口请求封装文件axiosbaseURL从本地缓存获取 二、代码演示
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配置文件修改完配置完全退出应用并重启生效
