Vue3中使用Puppeteer爬取网站时出现process未定义错误求助

问题根源 #

Puppeteer是Node.js专用的浏览器自动化库，依赖Node.js的process等全局变量，而你把它放在了Vue前端组件的<script setup>中执行——浏览器环境里根本不存在process变量，自然会抛出这个错误。而且就算解决了变量问题，浏览器也没有权限启动本地浏览器实例，Puppeteer依然无法正常工作。

正确解决方案：将爬虫代码移到Node.js后端 #

把Puppeteer代码放在后端服务中，前端通过接口调用触发爬虫操作：

1. 编写后端服务（以Express为例） #

创建server.js文件：

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();
const port = 3000;

// 定义爬虫接口
app.get('/scrape', async (req, res) => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://stackoverflow.com');
    
    // 执行页面脚本
    const three = await page.evaluate(() => 1 + 2);
    
    await browser.close();
    res.json({ result: three });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

运行后端：node server.js

2. 前端组件调用后端接口 #

修改Vue组件的<script setup>：

const onChange = async () => {
  try {
    const response = await fetch('http://localhost:3000/scrape');
    const data = await response.json();
    console.log(data.result); // 输出3
  } catch (error) {
    console.error('请求出错：', error);
  }
};

// 调用测试
onChange();

关于前端环境的无效尝试（不推荐） #

如果只是想临时消除process报错（但解决不了Puppeteer无法运行的核心问题），可以在Vite中添加Node.js变量polyfill：

1. 安装依赖：npm install vite-plugin-node-polyfills --save-dev
2. 修改vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills({
      include: ['process']
    })
  ]
});

但再次强调：这种方法只是补全了变量，Puppeteer依然无法在浏览器里启动本地浏览器，没有实际意义。

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