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í)行時(shí)候的文件夾地址
二、如何動態(tài)獲取Electron中配置文件的path?
2.1. __dirname
Node中的__dirname(前面有兩個(gè)下劃線)是一個(gè)全局變量,用來確定當(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. 開發(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,把配置文件目錄配置為extraResourcesextraResources: ["./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è)置一個(gè)配置文件,同時(shí)賦予程序?qū)ξ募凶x寫的權(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)開resources發(fā)現(xiàn)了我的配置文件目錄conf

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

既然目錄層級確定了,我們就通過node的path模塊組裝我們的讀寫路徑吧
這里路徑動態(tài)判斷了下–加以區(qū)分一下本地和打包的區(qū)別
/* 執(zhí)行node命令時(shí)候的文件夾地址 */ 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命令時(shí)候的文件夾地址 */
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ù)字(第一個(gè)不能是小數(shù)點(diǎn))
有時(shí)候我們需要限制input只能輸入有效的數(shù)字,有且只有一個(gè)小數(shù)點(diǎn),第一個(gè)不能為小數(shù)點(diǎn),那么就可以參考下面的函數(shù)來實(shí)現(xiàn)2018-09-09
javascript實(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-12
javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件,實(shí)例分析了javascript檢測上傳文件類型是否為圖片的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
ES6新特性八:async函數(shù)用法實(shí)例詳解
這篇文章主要介紹了ES6新特性八:async函數(shù)用法,結(jié)合實(shí)例形式分析了async函數(shù)的功能、原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript 設(shè)計(jì)模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
javascript實(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í)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12

