Electron 将网站打包成桌面程序

秋雨雁南飞2025-11-22 19:12

依赖环境：npm、node.js

main.js

javascript 复制代码

const { app, BrowserWindow, globalShortcut } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 1280,
    height: 900,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  // 👉 如果你的 URL 是本机服务，可这样写
  win.loadURL("http://localhost:5000/view");

  // 👉 开发环境直接打开 DevTools
  // win.webContents.openDevTools();

  // 👉 注册 F12 快捷键（打包后仍可用）
  globalShortcut.register("F12", () => {
    win.webContents.openDevTools();
  });

  // 👉 右键菜单：Inspect Element
  win.webContents.on("context-menu", () => {
    win.webContents.openDevTools();
  });
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

preload.js

javascript 复制代码

// 可以留空，也可以加一些未来需要的安全暴露接口
window.addEventListener("DOMContentLoaded", () => {});

package.json

javascript 复制代码

{
  "name": "webapp-package",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder --win --x64",
    "build": "electron-builder"
  },
  "build": {
	"electronDownload": {
      "mirror": "https://npmmirror.com/mirrors/electron/"
    },
    "appId": "pto.webtoexe",
    "productName": "PTO",
    "win": {
      "target": [
        "nsis",
        "portable"
      ]
    }
  },
  "devDependencies": {
    "electron": "^25.0.0",
    "electron-builder": "^24.13.3"
  }
}

1、将上面三个文件放到自己文件夹目录下

2、首先在自己目录下安装electron-builder

npm install electron-builder --save-dev

3、临时环境变量并运行

set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

npm run build

Electron 将网站打包成桌面程序

1、将上面三个文件放到自己文件夹目录下

2、首先在自己目录下安装electron-builder

3、临时环境变量并运行

4、dist目录下可以看到打包后的exe