运行 electron-builder 后，Puppeteer 在 React 应用程序中失败

Question

我在反应应用程序中的一些后端 js 中使用 puppeteer。

代码对于 puppeteer 组件来说相当简单，并且在 yarn 中的正常开发脚本中测试应用程序时它可以工作。 可能相关的代码相当简单：

const puppeteer = require('puppeteer');
  try {
     let browser = await puppeteer.launch({headless: false, 
     executablePath: process.env.CHROMIUM_PATH,
     args: ["--no-sandbox",
            "--disable-setuid-sandbox"]
});}
  catch (error) {
    return await error;
  }

但是，当我使用electron-builder将项目编译成可执行文件时，出现以下错误消息：

Error: Failed to launch the browser process! spawn 
<project directory in AppData>\node_modules\puppeteer\.local-chromium\win32\chrome-win\chrome.exe 
ENOENT TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

我认为这可能是我的依赖项的问题，但我觉得我已经尝试了一切

任何人有任何指导？

.local-chromium 文件摘要：

.local-chromium
  |win32
    |chrome-win
      |locales
      |MEIPreload
      |swiftshader
      |files within chrome-win

Files within chrome-win include:
-chrome.exe
-chrome_proxy.exe
-chrome_pwalauncher.exe
-chrome.dll
-Other PAK files, and smaller applications

除了子目录外，在 .local-chromium 或 win32 中没有任何内容

Answer 1

正如 sebasaenz 所建议的，这是 puppeteer 访问 Chromium 的问题。 我查看了未压缩的目录，但所有文件看起来都已提取。

我无法弄清楚.local-chromium 的问题是什么，所以我决定换个角度，只是将 puppeteer 引导到我的普通 chrome.exe 以自行运行。 您可以使用 puppeteer.launch 中的 executablePath 参数来执行此操作：

let browser = await puppeteer.launch({executablePath: "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"})

chrome.exe 可能对您来说位于不同的位置，但我很确定我的是默认位置

这确实允许我的应用程序在打包时工作，不幸的是，这意味着如果 chrome 路径不同，它在移动到另一台机器时不会自动工作。 不过，对于一个工作程序来说，这并不是最糟糕的权衡。

Answer 2

Puppeteer失败是因为它无法找到其可执行文件，使用下面的解决方案这对我 Prod 和 Dev 环境都有效。

"build": {
   "asar": true,
   "asarUnpack": "node_modules/puppeteer/.local-chromium/**/*"
 }

 function getChromiumExecPath() {
    return puppeteer.executablePath().replace('app.asar', 'app.asar.unpacked');
 }

 export function createBrowser(options = {}) {
     return puppeteer.launch({
            ...options,
            executablePath: getChromiumExecPath()
      });
 }

Answer 3

似乎问题与解压缩失败有关。 实际上在GitHub上有一个关于此的未解决问题。

在这种情况下，一种可能的解决方法是手动解压缩 zip 文件并将其解压缩到chrome-win文件夹中。

对于 Mac（GitHub 问题中的解决方法）是这样的：

unzip node_modules/puppeteer/.local-chromium/chrome-mac.zip
cp -r chrome-mac/Chromium.app/ ./node_modules/puppeteer/.local-chromium/mac-756035/chrome-mac/Chromium.app/

因此，我认为在您的情况下，您应该在win32或chrome-win文件夹中查找 zip 文件并将其复制到chrome-win文件夹中。

Answer 4

我的应用安装了 resources/app.asar.unpacked 目录。 它抛出的错误是

spawn <install_directory>\win-unpacked\resources\app.asar\node_modules\puppeteer\.local-chromium\win64-856583\chrome-win\chrome.exe ENOENT

因此，在启动 puppeteer 时，我会这样做：

async function openBrowser() {
  var executablePath = 
    puppeteer
      .executablePath()
      .replace("app.asar", "app.asar.unpacked")

  const browser = await puppeteer.launch({ 
    executablePath: executablePath
  });

  return browser
}

首次通过，尚未分发给用户。 没有在 OSX 上测试过。