electron-vite工具打包后如何通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址
前言
使用electron-vite 工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包，對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩。如果能在安裝目錄添加一個(gè)可配置文件，通過修改配置文件內(nèi)容改變接口地址問題將迎刃而解。這里記錄下一種實(shí)現(xiàn)方法。
一、實(shí)現(xiàn)過程
1、配置文件（json格式）放置resources資源文件夾下，將同步打包到應(yīng)用內(nèi)部，安裝后可在安裝目錄找到
2、啟動(dòng)應(yīng)用時(shí)在App.vue通知主進(jìn)程通過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)程通過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工具打包后通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)electron-vite工具打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)
這篇文章主要介紹了vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+el-menu實(shí)現(xiàn)菜單欄無限多層級(jí)分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無限多層級(jí)分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法
最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-03-03
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
在Vue3中,我們經(jīng)常會(huì)遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10
詳解為什么Vue中不要用index作為key(diff算法)
這篇文章主要介紹了詳解為什么Vue中不要用index作為key(diff算法)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽改變列表順序的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)注冊(cè)與登錄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09