electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
前言
使用electron-vite 工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包，對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩。如果能在安裝目錄添加一個(gè)可配置文件，通過(guò)修改配置文件內(nèi)容改變接口地址問(wèn)題將迎刃而解。這里記錄下一種實(shí)現(xiàn)方法。
一、實(shí)現(xiàn)過(guò)程
1、配置文件（json格式）放置resources資源文件夾下，將同步打包到應(yīng)用內(nèi)部，安裝后可在安裝目錄找到
2、啟動(dòng)應(yīng)用時(shí)在App.vue通知主進(jìn)程通過(guò)node fs模塊讀取配置文件接口地址，并緩存到本地
3、接口請(qǐng)求封裝文件（axios）baseURL從本地緩存獲取
二、代碼演示
1.resources/env.json
{
"baseUrl":"http://192.168.2.xxx:xxxx"
}新建一個(gè)json文件內(nèi)置接口地址
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>應(yīng)用啟動(dòng)開始時(shí)從主進(jìn)程獲取接口地址，緩存到本地localStorage（當(dāng)然也可以選擇緩存到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||''
})主進(jìn)程通過(guò)fs讀取env.json內(nèi)接口地址返回給渲染層
4.request.js
const baseURL = localStorage.getItem('baseUrl')??''
const http = axios.create({
baseURL,
timeout: 100000,
.....
.....
})
.....
.....接口請(qǐng)求統(tǒng)一封裝文件內(nèi)，從緩存獲取接口地址并設(shè)置
5.安裝后修改
打開安裝目錄，在resources\app.asar.unpacked\resources文件夾下可找到env.json配置文件，修改完配置完全退出應(yīng)用并重啟生效
到此這篇關(guān)于electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)electron-vite工具打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信jssdk邏輯在vue中的運(yùn)用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
用vue 實(shí)現(xiàn)手機(jī)觸屏滑動(dòng)功能
這篇文章主要介紹了用vue 實(shí)現(xiàn)手機(jī)觸屏滑動(dòng)的功能，文中通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)
這篇文章主要介紹了基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue請(qǐng)求后臺(tái)數(shù)據(jù)的三種方式
本文介紹Vue中使用Ajax、Fetch和axios三種方法向后臺(tái)請(qǐng)求數(shù)據(jù)的技術(shù)細(xì)節(jié),包括安裝配置、請(qǐng)求發(fā)送及響應(yīng)處理,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-04-04
在Vue3中創(chuàng)建和使用自定義指令的實(shí)現(xiàn)方式
在現(xiàn)代前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,它提供了許多強(qiáng)大的功能來(lái)幫助開發(fā)者構(gòu)建高效的用戶界面,自定義指令是 Vue.js 的一個(gè)重要特性,它允許開發(fā)者擴(kuò)展 HTML 元素的功能,本文將詳細(xì)介紹如何在 Vue3 中創(chuàng)建和使用自定義指令,并提供示例代碼來(lái)幫助理解2024-12-12
Vue修改iview組件的樣式的兩種方案(element同)
使用vue必然會(huì)用到等iview組件庫(kù),但是iview的組件的樣式跟自己寫的div的樣式修改不太一樣,所以本文給大家介紹了Vue修改iview組件的樣式的兩種方案(element同),需要的朋友可以參考下2024-04-04
實(shí)現(xiàn)多語(yǔ)言配置的Vue3項(xiàng)目方式
在Vue3項(xiàng)目中使用vue-i18n庫(kù)實(shí)現(xiàn)多語(yǔ)言配置,通過(guò)安裝、創(chuàng)建語(yǔ)言文件、配置全局語(yǔ)言并實(shí)現(xiàn)語(yǔ)言切換,為用戶提供多語(yǔ)言界面體驗(yàn)2025-12-12
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09