本期文章干货满满

前置操作

在background.js中启用node环境

1、使渲染进程拥有node环境
nodeIntegration: true,
2、启用remote模块，渲染进程就可以使用主程序模块
remote.enable(win.webContents);

const win = new BrowserWindow({
    // 初始窗口
    width: 1200,
    height: 900,
    // 全屏
    fullscreen: true,
    autoHideMenuBar: true, //隐藏菜单
    icon: "./icon.ico",
    webPreferences: {
      nodeIntegration: true, // 使渲染进程拥有node环境
      //关闭web权限检查，允许跨域
      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模块，渲染进程就可以使用主程序模块
  remote.enable(win.webContents);

1、在根目录下面新建一个文件夹mqttServe用于存放bat文件，

注意这里是根目录，不是src下面

image.png

2、我们找到vue.config.js进行打包的配置

这里需要注意 electron-builder 中两个常用的配置选项：extraResources 拷贝资源到打包后文件的 Resources 目录中，extraFiles 拷贝资源到打包目录的根路径下，这里使用extraResources ,其中 from 表示需要打包的资源文件路径，to 值为 “../” 表示根路径。

       extraResources: {
          //文件夹的相对路径
          from: "./mqttServe",
          //打包以后的存放路径，
          //这里需要在根目录新建的mqttServe存放上面三个文件，不然打包后会生成三个文件（散开了）在根目录
          to: "../mqttServe",
        },

打包后的文件

image.png
image.png

完整配置

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

  pluginOptions: {
    electronBuilder: {
      // 线上打包环境，静态资源不加载的问题
      customFileProtocol: "./",
      nodeIntegration: true,
      builderOptions: {
        // 镜像打包桌面应用，速度更快
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/",
        },
        productName: "设备互联终端", //项目名，也是生成的安装文件名 桌面应用.exe
        // 1、打包配置
        extraResources: {
          //文件夹的相对路径
          from: "./mqttServe",
          //打包以后的存放路径，
          //这里需要在根目录新建的mqttServe存放上面三个文件，不然打包后会生成三个文件（散开了）在根目录
          to: "../mqttServe",
        },
        win: {
          //win相关配置
          icon: "icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis", //利用nsis制作安装程序
              arch: [
                "x64", //64位
              ],
            },
          ],
        },
      },
    },
  },
});

3、在src下面新建文件夹mqttUtil用于封装启动和关闭服务的方法

image.png

下面重点来了！！！

vue中的process.cwd()

如果是electron-vue ，在vue中使用process.cwd()方法可以读取到打包后的根目录path
如： C:\Users\Administrator\AppData\Local\Programs\eit-electron
// 导入 shell 模块
import { shell } from "electron";
跑bat文件一共有两个方法
老版本的electron有方法openItem，新版本已经使用·openPath替换
openExternal: ƒ () 运行bat文件
openPath: ƒ ()打开bat文件
这里如果我们想跑java服务，一定要选择方式二！！！！！！！！！！！！切记切记

// const path = require("path");
// const isDev = process.env.NODE_ENV === "development";
//如果是electron-vue ，在vue中使用process.rootSrc()方法可以读取到打包后的根目录path
// 开发环境是D:\Desktop\electron\eit-electron   eit-electron就是我的项目文件夹名字
// 生产环境是C:\Users\Administrator\AppData\Local\Programs\eit-electron
const rootSrc = process.cwd();
const { dialog } = require("@electron/remote");
//引入node原生fs模块
const fs = require("fs");
//引入node原生读写配置
const ini = require("ini");
// 导入 shell 模块
import { shell } from "electron";

// 启动服务
export function startServer() {
  return new Promise((resolve, reject) => {
    // 注意这里文件路径一定要写双反斜杠
    const filePath = rootSrc + "\\mqttServe\\start.bat";
    // 这里注意一共有两个方法可以跑bat
    shell.openPath(filePath);
    resolve("启动成功");
  });
}
// 停止服务
export function stopServer() {
  return new Promise((resolve, reject) => {
    // 注意这里文件路径一定要写双反斜杠
    const filePath = rootSrc + "\\mqttServe\\stop.bat";
    shell.openPath(filePath);
    resolve("关闭成功");
  });
}
// 读取配置文件
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("写入成功");
  });
}
export function errMsg(msg) {
  dialog.showErrorBox("错误信息", msg);
}