本期文章干貨滿滿

前置操作

在background.js中啟用node環(huán)境

1、使渲染進(jìn)程擁有node環(huán)境
nodeIntegration: true,
2、啟用remote模塊，渲染進(jìn)程就可以使用主程序模塊
remote.enable(win.webContents);

const win = new BrowserWindow({
    // 初始窗口
    width: 1200,
    height: 900,
    // 全屏
    fullscreen: true,
    autoHideMenuBar: true, //隱藏菜單
    icon: "./icon.ico",
    webPreferences: {
      nodeIntegration: true, // 使渲染進(jìn)程擁有node環(huán)境
      //關(guān)閉web權(quán)限檢查，允許跨域
      webSecurity: false,
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  // 2.啟用remote模塊，渲染進(jìn)程就可以使用主程序模塊
  remote.enable(win.webContents);

1、在根目錄下面新建一個(gè)文件夾mqttServe用于存放bat文件，

注意這里是根目錄，不是src下面

image.png

2、我們找到vue.config.js進(jìn)行打包的配置

這里需要注意 electron-builder 中兩個(gè)常用的配置選項(xiàng)：extraResources 拷貝資源到打包后文件的 Resources 目錄中，extraFiles 拷貝資源到打包目錄的根路徑下，這里使用extraResources ,其中 from 表示需要打包的資源文件路徑，to 值為 “../” 表示根路徑。

       extraResources: {
          //文件夾的相對(duì)路徑
          from: "./mqttServe",
          //打包以后的存放路徑，
          //這里需要在根目錄新建的mqttServe存放上面三個(gè)文件，不然打包后會(huì)生成三個(gè)文件（散開(kāi)了）在根目錄
          to: "../mqttServe",
        },

打包后的文件

image.png

image.png

完整配置

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  pluginOptions: {
    electronBuilder: {
      // 線上打包環(huán)境，靜態(tài)資源不加載的問(wèn)題
      customFileProtocol: "./",
      nodeIntegration: true,
      builderOptions: {
        // 鏡像打包桌面應(yīng)用，速度更快
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/",
        },
        productName: "設(shè)備互聯(lián)終端", //項(xiàng)目名，也是生成的安裝文件名 桌面應(yīng)用.exe
        // 1、打包配置
        extraResources: {
          //文件夾的相對(duì)路徑
          from: "./mqttServe",
          //打包以后的存放路徑，
          //這里需要在根目錄新建的mqttServe存放上面三個(gè)文件，不然打包后會(huì)生成三個(gè)文件（散開(kāi)了）在根目錄
          to: "../mqttServe",
        },
        win: {
          //win相關(guān)配置
          icon: "icon.ico", //圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個(gè)坑
          target: [
            {
              target: "nsis", //利用nsis制作安裝程序
              arch: [
                "x64", //64位
              ],
            },
          ],
        },
      },
    },
  },
});

3、在src下面新建文件夾mqttUtil用于封裝啟動(dòng)和關(guān)閉服務(wù)的方法

image.png

下面重點(diǎn)來(lái)了?。?！

vue中的process.cwd()

如果是electron-vue ，在vue中使用process.cwd()方法可以讀取到打包后的根目錄path
如： C:\Users\Administrator\AppData\Local\Programs\eit-electron
// 導(dǎo)入 shell 模塊
import { shell } from "electron";
跑bat文件一共有兩個(gè)方法
老版本的electron有方法openItem，新版本已經(jīng)使用·openPath替換
openExternal: ? () 運(yùn)行bat文件
openPath: ? ()打開(kāi)bat文件
這里如果我們想跑java服務(wù)，一定要選擇方式二?。。。。。。。。。。?！切記切記

// const path = require("path");
// const isDev = process.env.NODE_ENV === "development";
//如果是electron-vue ，在vue中使用process.rootSrc()方法可以讀取到打包后的根目錄path
// 開(kāi)發(fā)環(huán)境是D:\Desktop\electron\eit-electron   eit-electron就是我的項(xiàng)目文件夾名字
// 生產(chǎn)環(huán)境是C:\Users\Administrator\AppData\Local\Programs\eit-electron
const rootSrc = process.cwd();
const { dialog } = require("@electron/remote");
//引入node原生fs模塊
const fs = require("fs");
//引入node原生讀寫(xiě)配置
const ini = require("ini");
// 導(dǎo)入 shell 模塊
import { shell } from "electron";

// 啟動(dòng)服務(wù)
export function startServer() {
  return new Promise((resolve, reject) => {
    // 注意這里文件路徑一定要寫(xiě)雙反斜杠
    const filePath = rootSrc + "\\mqttServe\\start.bat";
    // 這里注意一共有兩個(gè)方法可以跑bat
    shell.openPath(filePath);
    resolve("啟動(dòng)成功");
  });
}
// 停止服務(wù)
export function stopServer() {
  return new Promise((resolve, reject) => {
    // 注意這里文件路徑一定要寫(xiě)雙反斜杠
    const filePath = rootSrc + "\\mqttServe\\stop.bat";
    shell.openPath(filePath);
    resolve("關(guān)閉成功");
  });
}
// 讀取配置文件
export function readFile() {
  return new Promise((resolve, reject) => {
    const filePath = rootSrc + "\\mqttServe\\application.properties";
    let config = ini.parse(fs.readFileSync(filePath).toString());
    resolve(config);
  });
}
// 更改配置文件
export function writeFile(config) {
  return new Promise((resolve, reject) => {
    const filePath = rootSrc + "\\mqttServe\\application.properties";
    fs.writeFileSync(filePath, ini.stringify(config));
    resolve("寫(xiě)入成功");
  });
}
export function errMsg(msg) {
  dialog.showErrorBox("錯(cuò)誤信息", msg);
}