如何爬取 Vue 和 React 构建的基于组件的 Web 应用程序？

Question

我想爬取我用Vue框架构建的SPA（和React框架差不多）。但是，我看到内容在抓取时没有呈现。结果是：

 <!doctype html>
 <HTML>
  <body>
   <div id=app>
    </div>
     <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script> 
     <script type=text/javascript src=/static/js/vendor.60c471696de493d48a1c.js></script>
     <script type=text/javascript src=/static/js/app.335a9e9866cb7dc6a517.js></script>
  </body>
 </html>

组件化的javascript框架是否防爬？如何让组件被爬虫渲染？

我正在使用 Abot 框架来抓取建议

Answer 1

Abot 所做的只是向目标网站发送请求，解析数据，然后将其传回给您。您可能知道，像 React 或 Vue 这样的框架是 100% JavaScript 基础的，这意味着除非您运行 JavaScript，否则不会呈现任何数据。所以这里的解决方案是启动无头浏览器或另一个 DOM 引擎并抓取数据。

您可以使用的几个引擎是 Selenium（在 Python 和其他一些语言中可用的浏览器自动化框架）、Puppeteer（NodeJS 中的 Chromium-based web-scraper）或 DOM 像 JS 的引擎DOM.

这个故事的寓意是：如果你想看到 JavaScript 渲染的结果，你必须在 DOM.

中执行 JavaScript

如何爬取 Vue 和 React 构建的基于组件的 Web 应用程序？

How to crawl component-based web applications built by Vue and React?

reactjs

vue.js

web-crawler

abot