使用electron发布将vue打包的dist静态文件作为应用程序打开

1. 新建一个项目安装electron
2. 项目内安装live-server
3. 将打包好的dist文件放到electron根目录
4. 配置electron中的main.js
   .const { app, BrowserWindow, ipcMain, Menu } = require(“electron”);
   const path = require(“node:path”);
   var liveServer = require(“live-server”);

// live-server运行参数
var params = {
port: 8080, // Set the server port. Defaults to 8080.
host: “0.0.0.0”, // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
open: false, // When false, it won’t load your browser by default.
root: “./dist”,
file: “index.html”,
wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
middleware: [
function (req, res, next) {
next();
},
], // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
};

// 创建窗口
const createWindow = () => {
const win = new BrowserWindow({
width: 111,
height: 111,
webPreferences: {
preload: path.join(__dirname, “preload.js”),
nodeIntegration: true,
},
useContentSize: true,
icon: path.join(__dirname, “./dist/favicon.ico”),
});

win.maximize();
win.loadURL(“http://localhost:8080”);
};

app.whenReady().then(() => {
Menu.setApplicationMenu(null);
liveServer.start(params);
createWindow();
// app.on(“activate”, () => {
// if (BrowserWindow.getAllWindows().length === 0) createWindow();
// });
app.on(“window-all-closed”, () => {
if (process.platform !== “darwin”) app.quit();
});
});

原理就是把live-server运行项目集成到启动里
npm run start 项目就可以看到效果了