Vue3使用Puppeteer报错ReferenceError: process is not defined的解决办法

错误根源 #

Puppeteer是Node.js专属的爬虫工具，依赖Node.js的process等后端API，无法直接在浏览器环境（Vue前端组件）中运行。你当前把爬虫代码直接引入Vue组件，导致浏览器找不到process对象而报错。

可行解决方法 #

方法1：将爬虫逻辑移至Node.js后端（推荐） #

把Puppeteer代码放在后端服务中，前端通过API接口调用获取爬虫结果，这是最标准的实现方式。

步骤1：搭建Express后端服务

1. 安装依赖：

npm install express cors puppeteer

2. 在项目根目录新建server.js：

const express = require('express');
const cors = require('cors');
const puppeteer = require('puppeteer');

const app = express();
app.use(cors());
app.use(express.json());

// 定义爬虫接口
app.get('/api/scrap', async (req, res) => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('YOUR_SITE');
    
    const element = await page.waitForSelector('div > .class-name');
    await element.click();
    
    // 示例：获取元素文本内容
    const data = await element.textContent();
    
    await element.dispose();
    await browser.close();
    res.json({ success: true, data });
  } catch (error) {
    res.json({ success: false, error: error.message });
  }
});

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`后端服务运行在端口 ${PORT}`);
});

步骤2：修改Vue组件调用后端接口

1. 安装请求库：

npm install axios

2. 更新Webscrap.vue：

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

const result = ref('');

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:3001/api/scrap');
    result.value = response.data.data;
  } catch (error) {
    console.error('爬虫请求失败:', error);
  }
});
</script>

<template>
  <div>爬虫结果：{{ result }}</div>
</template>

方法2：临时消除报错（仅用于测试，无法解决核心问题） #

如果只是想临时去掉process is not defined的提示，但无法让Puppeteer在前端正常运行，可以在项目配置中注入空的process对象：

• 若使用Vite，修改vite.config.js：

export default {
  define: {
    'process.env': {}
  }
};

• 若使用Vue CLI，修改vue.config.js：

const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack');

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {}
      })
    ]
  }
});

⚠️ 注意：这种方式只是屏蔽报错，Puppeteer仍然无法在浏览器中启动浏览器实例，最终还是会功能失效。

方法3：前端轻量爬虫（仅适用于静态页面） #

如果目标页面是纯静态HTML，不需要处理JS动态渲染的内容，可以用cheerio配合fetch实现前端轻量爬取：

1. 安装依赖：

npm install cheerio

2. 修改Vue组件：

<script setup>
import cheerio from 'cheerio';
import { onMounted, ref } from 'vue';

const result = ref('');

onMounted(async () => {
  try {
    const response = await fetch('YOUR_SITE');
    const html = await response.text();
    const $ = cheerio.load(html);
    result.value = $('div > .class-name').text();
  } catch (error) {
    console.error('获取内容失败:', error);
  }
});
</script>

<template>
  <div>爬取内容：{{ result }}</div>
</template>

⚠️ 注意：该方法无法处理需要JS渲染的动态页面（比如Vue/React单页应用）。

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