当前位置：首页 > VUE

vue实现爬虫

2026-03-07 12:32:10VUE

在Vue中实现爬虫功能通常需要结合后端服务或浏览器扩展技术，因为Vue本身是前端框架，无法直接处理跨域或服务器端请求。以下是几种可行的实现方式：

使用Vue与Node.js后端结合

通过Vue前端发起请求，由Node.js后端执行爬虫任务并返回数据。这种方式可以绕过浏览器的跨域限制。

安装必要的Node.js爬虫库（如axios、cheerio或puppeteer）：

npm install axios cheerio

后端示例代码（Node.js）：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

app.get('/api/crawl', async (req, res) => {
  try {
    const { data } = await axios.get('https://目标网站.com');
    const $ = cheerio.load(data);
    const results = [];
    $('选择器').each((i, elem) => {
      results.push($(elem).text());
    });
    res.json(results);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);

Vue组件中调用API：

methods: {
  async fetchData() {
    const response = await axios.get('http://localhost:3000/api/crawl');
    this.crawledData = response.data;
  }
}

使用浏览器扩展技术

通过Vue浏览器插件（如Chrome扩展）直接操作页面DOM，适用于需要交互的爬取场景。

manifest.json配置示例：

{
  "manifest_version": 2,
  "name": "Vue Crawler",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["https://目标网站.com/*"],
    "js": ["content-script.js"]
  }]
}

content-script.js示例：

const elements = document.querySelectorAll('选择器');
const data = Array.from(elements).map(el => el.textContent);
chrome.runtime.sendMessage({ action: 'crawl', data });

使用Puppeteer的无头浏览器方案

对于复杂动态内容，可通过Vue触发后端使用Puppeteer进行爬取。

Puppeteer示例代码：

vue实现爬虫

const puppeteer = require('puppeteer');

async function crawl() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://目标网站.com');
  const data = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('选择器')).map(el => el.innerText);
  });
  await browser.close();
  return data;
}