electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解
一、背景知識
1.1. nodejs內(nèi)置的fs文件系統(tǒng)模塊
1.2. Nodejs中fs文件系統(tǒng)模塊的路徑動態(tài)拼接的問題
Nodejs中fs文件系統(tǒng)模塊的路徑動態(tài)拼接的問題
1.3. process.cwd()方法
用來獲取node命令執(zhí)行時候的文件夾地址
二、如何動態(tài)獲取Electron中配置文件的path?
2.1. __dirname
Node
中的__dirname
(前面有兩個下劃線)是一個全局變量,用來確定當(dāng)前運(yùn)行的文件所在的目錄。是被執(zhí)行的js文件的目錄。
2.2. process.cwd()
process.cwd()
是當(dāng)前執(zhí)行node命令時候的目錄。
2.3. 為什么選擇process.cwd()
兩種方式都可以,一個是當(dāng)前運(yùn)行的文件所在的目錄,一個是node命令時候的目錄,我用的是
process.cwd()
2.4. 不同環(huán)境中的process.cwd()值
我們打印下不同環(huán)境中的
process.cwd()
值
/* 執(zhí)行node命令時候的文件夾地址 */ 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. 開發(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é)果
從上面可以看出–這里的文件路徑會根據(jù)環(huán)境不同而變化,我們重點(diǎn)還是放在安裝后的打印結(jié)果,因?yàn)?code>exe肯定都是用來安裝到我們的電腦上面的
三、把配置文件目錄放置到extraResources配置項(xiàng)
3.1. extraResources
extraResources
是electron
的打包額外資源配置,它允許我們打包安裝后,仍可以訪問并且讀寫配置中的文件目錄
3.2. 按照如下步驟進(jìn)行配置
這是我配置文件的位置
找到vue.config.js
,把配置文件目錄配置為extraResources
extraResources: ["./bin", "./conf"],
pluginOptions: { electronBuilder: { // 線上打包環(huán)境,靜態(tài)資源不加載的問題 customFileProtocol: "./", nodeIntegration: true, builderOptions: { productName: "設(shè)備互聯(lián)終端", //項(xiàng)目名,也是生成的安裝文件名 桌面應(yīng)用.exe /* extraResources在Electron的打包程序安裝完成后, 同樣可以根據(jù)不同的計(jì)算機(jī),做一些特殊的配置, 這就需要在Electron中設(shè)置一個配置文件,同時賦予程序?qū)ξ募凶x寫的權(quán)限。 */ extraResources: ["./bin", "./conf"], win: { //win相關(guān)配置 icon: "icon.ico", //圖標(biāo),當(dāng)前圖標(biāo)在根目錄下,注意這里有兩個坑 target: [ { target: "nsis", //利用nsis制作安裝程序 arch: [ "x64", //64位 ], }, ], }, }, }, },
四、獲取打包后的配置文件路徑
node_serve_path
是打包安裝后的process.cwd()
打印的結(jié)果
我們順著這個路徑找下去、可以看到有個resources
文件夾,這就是electron
的額外資源存放的目錄
點(diǎn)開resources
發(fā)現(xiàn)了我的配置文件目錄conf
點(diǎn)開conf
就是我的配置文件了
既然目錄層級確定了,我們就通過node
的path
模塊組裝我們的讀寫路徑吧
這里路徑動態(tài)判斷了下–加以區(qū)分一下本地和打包的區(qū)別
/* 執(zhí)行node命令時候的文件夾地址 */ const node_serve_path = process.cwd(); /* 判斷是否是生產(chǎn)環(huán)境 */ const isDev = process.env.NODE_ENV === "development"; /* 需要讀寫的文件地址 */ const file_path = isDev ? path.join(node_serve_path, "/conf/application.properties") : path.join(node_serve_path, "/resources/conf/application.properties");
五、封裝
讀寫完整代碼如下
//引入node原生fs模塊 const fs = require("fs"); // 引入node內(nèi)置的path模塊 const path = require("path"); //引入node原生讀寫配置 const ini = require("ini"); /* 執(zhí)行node命令時候的文件夾地址 */ const node_serve_path = process.cwd(); /* 判斷是否是生產(chǎn)環(huán)境 */ const isDev = process.env.NODE_ENV === "development"; /* 需要讀寫的文件地址 */ 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配置文件的格式, 就可以通過ini.parse把讀取到的文件轉(zhuǎn)成js可識別的對象 */ 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); //寫入失敗 resolve("寫入成功"); }); }); }
以上就是electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于electron讀取和寫入配置文件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js限制input只能輸入有效的數(shù)字(第一個不能是小數(shù)點(diǎn))
有時候我們需要限制input只能輸入有效的數(shù)字,有且只有一個小數(shù)點(diǎn),第一個不能為小數(shù)點(diǎn),那么就可以參考下面的函數(shù)來實(shí)現(xiàn)2018-09-09javascript實(shí)現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法,結(jié)合實(shí)例形式分析了JS函數(shù)名的判斷及函數(shù)動態(tài)調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2016-12-12javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件,實(shí)例分析了javascript檢測上傳文件類型是否為圖片的功能,非常具有實(shí)用價值,需要的朋友可以參考下2015-04-04ES6新特性八:async函數(shù)用法實(shí)例詳解
這篇文章主要介紹了ES6新特性八:async函數(shù)用法,結(jié)合實(shí)例形式分析了async函數(shù)的功能、原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript 設(shè)計(jì)模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04javascript實(shí)現(xiàn)Table排序的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)Table排序的方法,涉及javascript針對表格對象的獲取與排序相關(guān)技巧,需要的朋友可以參考下2015-05-05使用webpack/gulp構(gòu)建TypeScript項(xiàng)目的方法示例
這篇文章主要介紹了使用webpack/gulp構(gòu)建TypeScript項(xiàng)目的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12