Electron-Vue3经electron-builder打包后Playwright浏览器失效问题

问题背景 #

开发基于Electron-Vue3的网页爬取应用，使用Playwright实现网页操作。开发阶段功能正常，但通过electron-builder打包成安装包后，Playwright调用的浏览器完全无法工作。尝试通过相对路径指定浏览器executablePath，但安装后无法定位到浏览器文件，希望将Chrome浏览器直接嵌入安装包（如resources目录），并让Playwright在安装后的应用中正常调用。

解决方案 #

1. 配置electron-builder嵌入Chrome资源 #

首先需要让electron-builder在打包时将Chrome文件复制到应用的resources目录，避免路径丢失。在package.json中添加build配置：

{
  // ... 其他原有配置
  "build": {
    "extraResources": [
      {
        "from": "src/main/scrapper/browser",
        "to": "scrapper/browser"
      }
    ]
  }
}

该配置会将src/main/scrapper/browser下的所有Chrome文件，复制到安装后应用的resources/scrapper/browser目录中。

2. 动态获取Chrome的正确路径 #

Electron打包后，主进程的文件位置会发生变化，需要根据应用是否处于打包状态，动态计算Chrome的绝对路径。修改configBrowser.js中的路径逻辑：

import { chromium } from "playwright";
import { login } from "./login.js";
import fs from "fs";
import path from "path";
const { app } = require("electron");

export async function configBrowser() {
  const contextFilePath = "browserContext.json";
  let context;
  let page;

  // 动态计算Chrome路径，适配开发/打包两种状态
  let executablePath;
  if (app.isPackaged) {
    // 打包后：从应用可执行文件所在目录向上回溯到resources
    executablePath = path.join(
      app.getPath("exe"),
      "../..",
      "scrapper",
      "browser",
      "chrome",
      // 适配不同平台的Chrome文件名
      process.platform === "win32" ? "chrome.exe" :
      process.platform === "darwin" ? "Chromium.app/Contents/MacOS/Chromium" : "chrome"
    );
  } else {
    // 开发阶段：直接从当前文件目录定位到Chrome
    executablePath = path.join(
      __dirname,
      "browser",
      "chrome",
      process.platform === "win32" ? "chrome.exe" :
      process.platform === "darwin" ? "Chromium.app/Contents/MacOS/Chromium" : "chrome"
    );
  }

  console.log("Chrome路径:", executablePath);
  console.log("路径是否存在:", fs.existsSync(executablePath));

  const browser = await chromium.launch({
    headless: false,
    devtools: true,
    args: [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--mute-audio",
      "--disable-gpu", // 适配部分环境的图形驱动问题
      "--disable-dev-shm-usage" // 解决Linux下的共享内存限制
    ],
    executablePath: executablePath,
    timeout: 60000,
  });

  // ... 后续原有逻辑
}

3. 确保Chrome文件版本兼容 #

建议使用Playwright官方提供的Chrome版本，避免兼容性问题：

npx playwright install chromium

将下载的Chrome目录（默认在node_modules/playwright-chromium/.local-chromium下）完整复制到src/main/scrapper/browser/chrome目录中。

4. 调整build.js的复制逻辑（可选） #

如果不需要在开发阶段将Chrome复制到dist目录，可以删除build.js中的copyScrapperBrowser函数调用，完全依赖electron-builder的extraResources配置来处理打包时的文件复制。

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