如何用electron-builder打包嵌入Laravel的Electron项目为可分发EXE

核心配置思路 #

你的项目中Laravel存放在www目录，打包的关键是让electron-builder完整包含该目录，并调整Electron的加载逻辑适配开发/生产环境。

1. 完善package.json的build配置 #

在package.json中添加electron-builder专属配置，确保www目录被打包：

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "Laravel Electron App",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "www/**/*" // 强制打包www目录下所有文件
    ],
    "win": {
      "target": "nsis", // 生成标准安装包，可选portable生成便携版
      "icon": "build/icon.ico" // 可选，替换为你的应用图标路径
    }
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.1",
    "electron-is-dev": "^2.0.0"
  }
}

2. 调整main.js的加载逻辑 #

开发环境加载Laravel本地服务，生产环境启动内置PHP服务并加载（需提前将PHP Windows二进制文件放入www目录）：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');
const isDev = require('electron-is-dev');

let mainWindow;
let laravelServer;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true
    }
  });

  if (isDev) {
    // 开发模式：加载本地Laravel服务
    mainWindow.loadURL('http://localhost:8000');
    mainWindow.webContents.openDevTools();
  } else {
    // 生产模式：启动内置PHP服务
    const phpExecPath = path.join(__dirname, 'www', 'php.exe');
    const publicDir = path.join(__dirname, 'www', 'public');
    laravelServer = exec(`${phpExecPath} -S localhost:8000 -t ${publicDir}`);

    // 延迟加载确保服务启动
    setTimeout(() => {
      mainWindow.loadURL('http://localhost:8000');
    }, 2000);
  }

  mainWindow.on('closed', () => {
    laravelServer?.kill();
    mainWindow = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) createWindow();
});

3. 执行打包命令 #

1. 安装依赖：

npm install

2. 启动打包：

npm run build

打包完成后，可执行文件会生成在dist目录下。

常见问题排查 #

• www目录未打包：检查package.json中build.files配置是否包含"www/**/*"
• 生产环境无法加载页面：确认PHP二进制文件已放入www目录，且main.js中路径配置正确
• 权限报错：调整Electron窗口webPreferences的权限配置，或确保打包后的目录有读写权限

内容的提问来源于stack exchange，提问作者vivek kn