欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解

 更新時間:2024年03月19日 10:24:40   作者:扶蘇1002  
這篇文章主要介紹了electron實(shí)現(xiàn)讀取和寫入配置文件的示例,文中通過代碼示例和圖文結(jié)合的方式介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

一、背景知識

1.1. nodejs內(nèi)置的fs文件系統(tǒng)模塊

Node中的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é)果

image.png

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

在這里插入圖片描述

打印結(jié)果

image.png

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

在這里插入圖片描述

打印結(jié)果

image.png

從上面可以看出–這里的文件路徑會根據(jù)環(huán)境不同而變化,我們重點(diǎn)還是放在安裝后的打印結(jié)果,因?yàn)?code>exe肯定都是用來安裝到我們的電腦上面的

三、把配置文件目錄放置到extraResources配置項(xiàng)

3.1. extraResources

extraResourceselectron的打包額外資源配置,它允許我們打包安裝后,仍可以訪問并且讀寫配置中的文件目錄

3.2. 按照如下步驟進(jìn)行配置

這是我配置文件的位置

image.png

找到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é)果

image.png

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

image.png

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

image.png

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

image.png

既然目錄層級確定了,我們就通過nodepath模塊組裝我們的讀寫路徑吧

這里路徑動態(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)文章

最新評論