本期文章干货满满
前置操作
在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);
}
