electron實(shí)現(xiàn)讀取和寫(xiě)入配置文件的示例詳解
一、背景知識(shí)
1.1. nodejs內(nèi)置的fs文件系統(tǒng)模塊
1.2. Nodejs中fs文件系統(tǒng)模塊的路徑動(dòng)態(tài)拼接的問(wèn)題
Nodejs中fs文件系統(tǒng)模塊的路徑動(dòng)態(tài)拼接的問(wèn)題
1.3. process.cwd()方法
用來(lái)獲取node命令執(zhí)行時(shí)候的文件夾地址
二、如何動(dòng)態(tài)獲取Electron中配置文件的path?
2.1. __dirname
Node中的__dirname(前面有兩個(gè)下劃線)是一個(gè)全局變量,用來(lái)確定當(dāng)前運(yùn)行的文件所在的目錄。是被執(zhí)行的js文件的目錄。
2.2. process.cwd()
process.cwd()是當(dāng)前執(zhí)行node命令時(shí)候的目錄。
2.3. 為什么選擇process.cwd()
兩種方式都可以,一個(gè)是當(dāng)前運(yùn)行的文件所在的目錄,一個(gè)是node命令時(shí)候的目錄,我用的是
process.cwd()
2.4. 不同環(huán)境中的process.cwd()值
我們打印下不同環(huán)境中的
process.cwd()值
/* 執(zhí)行node命令時(shí)候的文件夾地址 */
const node_serve_path = process.cwd();
// 讀取配置文件
export function readFile() {
return new Promise((resolve, reject) => {
console.log("node_serve_path----", node_serve_path);
console.log("__dirname---", __dirname);
});
}
2.4.1. 開(kāi)發(fā)環(huán)境 打印結(jié)果

2.4.2. 打包后不安裝,運(yùn)行/dist_electron/win-unpacked/exe文件

打印結(jié)果

2.4.3. 打包后安裝,運(yùn)行/dist_electron/Setup 0.1.0.exe安裝程序文件

打印結(jié)果

從上面可以看出–這里的文件路徑會(huì)根據(jù)環(huán)境不同而變化,我們重點(diǎn)還是放在安裝后的打印結(jié)果,因?yàn)?code>exe肯定都是用來(lái)安裝到我們的電腦上面的
三、把配置文件目錄放置到extraResources配置項(xiàng)
3.1. extraResources
extraResources是electron的打包額外資源配置,它允許我們打包安裝后,仍可以訪問(wèn)并且讀寫(xiě)配置中的文件目錄
3.2. 按照如下步驟進(jìn)行配置
這是我配置文件的位置

找到vue.config.js,把配置文件目錄配置為extraResourcesextraResources: ["./bin", "./conf"],
pluginOptions: {
electronBuilder: {
// 線上打包環(huán)境,靜態(tài)資源不加載的問(wèn)題
customFileProtocol: "./",
nodeIntegration: true,
builderOptions: {
productName: "設(shè)備互聯(lián)終端", //項(xiàng)目名,也是生成的安裝文件名 桌面應(yīng)用.exe
/* extraResources在Electron的打包程序安裝完成后,
同樣可以根據(jù)不同的計(jì)算機(jī),做一些特殊的配置,
這就需要在Electron中設(shè)置一個(gè)配置文件,同時(shí)賦予程序?qū)ξ募凶x寫(xiě)的權(quán)限。
*/
extraResources: ["./bin", "./conf"],
win: {
//win相關(guān)配置
icon: "icon.ico", //圖標(biāo),當(dāng)前圖標(biāo)在根目錄下,注意這里有兩個(gè)坑
target: [
{
target: "nsis", //利用nsis制作安裝程序
arch: [
"x64", //64位
],
},
],
},
},
},
},
四、獲取打包后的配置文件路徑
node_serve_path是打包安裝后的process.cwd()打印的結(jié)果

我們順著這個(gè)路徑找下去、可以看到有個(gè)resources文件夾,這就是electron的額外資源存放的目錄

點(diǎn)開(kāi)resources發(fā)現(xiàn)了我的配置文件目錄conf

點(diǎn)開(kāi)conf就是我的配置文件了

既然目錄層級(jí)確定了,我們就通過(guò)node的path模塊組裝我們的讀寫(xiě)路徑吧
這里路徑動(dòng)態(tài)判斷了下–加以區(qū)分一下本地和打包的區(qū)別
/* 執(zhí)行node命令時(shí)候的文件夾地址 */ const node_serve_path = process.cwd(); /* 判斷是否是生產(chǎn)環(huán)境 */ const isDev = process.env.NODE_ENV === "development"; /* 需要讀寫(xiě)的文件地址 */ const file_path = isDev ? path.join(node_serve_path, "/conf/application.properties") : path.join(node_serve_path, "/resources/conf/application.properties");
五、封裝
讀寫(xiě)完整代碼如下
//引入node原生fs模塊
const fs = require("fs");
// 引入node內(nèi)置的path模塊
const path = require("path");
//引入node原生讀寫(xiě)配置
const ini = require("ini");
/* 執(zhí)行node命令時(shí)候的文件夾地址 */
const node_serve_path = process.cwd();
/* 判斷是否是生產(chǎn)環(huán)境 */
const isDev = process.env.NODE_ENV === "development";
/* 需要讀寫(xiě)的文件地址 */
const file_path = isDev
? path.join(node_serve_path, "/conf/11application.properties")
: path.join(node_serve_path, "/resources/conf/application.properties");
// 讀取配置文件
export function readFile() {
return new Promise((resolve, reject) => {
fs.readFile(file_path, "utf8", function (err, dataStr) {
if (err) return reject(err.message); //讀取失敗
/* application.properties 文件內(nèi)容符合ini配置文件的格式,
就可以通過(guò)ini.parse把讀取到的文件轉(zhuǎn)成js可識(shí)別的對(duì)象 */
resolve(ini.parse(dataStr.toString()));
});
});
}
// 更改配置文件
export function writeFile(config) {
return new Promise((resolve, reject) => {
fs.writeFile(file_path, ini.stringify(config), function (err) {
if (err) return reject(err.message); //寫(xiě)入失敗
resolve("寫(xiě)入成功");
});
});
}
以上就是electron實(shí)現(xiàn)讀取和寫(xiě)入配置文件的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于electron讀取和寫(xiě)入配置文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue配置electron使用electron-builder進(jìn)行打包的操作方法
- electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
- vue中electron框架自定義外部配置文件的配置與讀取辦法
- vite?+?electron-builder?打包配置詳解
- electron-builder打包配置詳解
- vue3+electron12+dll開(kāi)發(fā)客戶端配置詳解
- 如何使用electron-builder及electron-updater給項(xiàng)目配置自動(dòng)更新
- Electron 使用 Nodemon 配置自動(dòng)重啟的方法
相關(guān)文章
使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置
Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)已經(jīng)存在的屬性, 并返回這個(gè)對(duì)象。下面這篇文章主要給大家介紹了關(guān)于使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置的相關(guān)資料,需要的朋友可以參考下2018-11-11
javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全,涉及到altkey和event屬性語(yǔ)法定義及用法,本文介紹的非常詳細(xì),感興趣的朋友一起看看吧2015-11-11
不提示直接關(guān)閉網(wǎng)頁(yè)窗口的JS示例代碼
本篇文章主要是對(duì)不提示直接關(guān)閉網(wǎng)頁(yè)窗口的JS示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
這篇文章主要介紹了JS實(shí)現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實(shí)現(xiàn)忽略大小寫(xiě),模糊搜索,多關(guān)鍵搜索等功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
js動(dòng)態(tài)添加事件并可傳參數(shù)示例代碼
js動(dòng)態(tài)添加事件可以搜索到很多的相關(guān)文章,不過(guò)可以傳參數(shù)的就沒(méi)有幾個(gè)了,下面有個(gè)不錯(cuò)的示例可以滿足大家對(duì)傳參的需求,感興趣的各位不要錯(cuò)過(guò)2013-10-10

