使用Cheerio、Axios和Node.js爬取Vue网站时如何绕过v-cloak？

你遇到的核心问题是：这个网站是**客户端渲染（CSR）**的，Axios请求到的只是Vue应用的初始静态HTML壳，真实内容是浏览器加载Vue.js后动态生成的。Cheerio只能解析静态HTML，没法执行JavaScript，所以只能看到v-cloak占位符和<router-view>路由容器，看不到渲染后的真实内容。

下面是两种可行的解决方案：

方案1：用无头浏览器模拟渲染（推荐） #

使用Puppeteer或Playwright这类无头浏览器工具，模拟真实浏览器加载页面、执行JavaScript，等Vue渲染完成后再抓取内容。

示例（Puppeteer） #

1. 先安装依赖：

npm install puppeteer

2. 替换原有代码为：

const puppeteer = require('puppeteer');
const pretty = require('pretty');

const init = async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 访问目标页面，等待网络空闲（确保Vue完成渲染）
  await page.goto('https://nl.shein.com/EMERY-ROSE-Sheer-Embroidery-Mesh-Bell-Sleeve-Curved-Hem-Tee-p-10461869-cat-1738.html?src_identifier=ai%3D53810%60an%3Demery-rose%60on%3DBanner%60cn%3DBanner22%60hz%3DBanner22A02%60ps%3D3%60jc%3DitemPicking_00851909&src_module=campaign&src_tab_page_id=page_activity_factory1658092077463&attr_ids=&scici=campaign_emery-rose_53810~~ON_1,CN_Banner22,HZ_Banner22A02,HI_hotZone_e6za4zfl0~~2~~itemPicking_00851909~~', {
    waitUntil: 'networkidle2' // 等待网络请求基本结束
  });
  
  // 抓取目标div的渲染后内容
  const detailHtml = await page.$eval('.j-goods-detail-v2', el => el.innerHTML);
  console.log(pretty(detailHtml));
  
  // 关闭浏览器
  await browser.close();
};

init();

方案2：直接调用网站的API接口 #

很多Vue网站会通过AJAX请求后端API获取数据，直接调用API比爬HTML更高效、稳定：

1. 打开浏览器F12，切换到「Network」标签页
2. 刷新目标页面，过滤「XHR/Fetch」类型的请求
3. 查找包含商品详情数据的接口（通常URL里会有goods、detail这类关键词）
4. 复制该接口的URL和请求参数，用Axios直接请求，就能拿到结构化的JSON数据，无需解析HTML

为什么原有方法无效？ #

Cheerio是基于静态HTML的解析工具，无法执行页面中的JavaScript代码。而Vue客户端渲染的网站，服务器返回的初始HTML只有占位符，所有真实内容都是浏览器加载Vue后动态生成的，所以Axios+Cheerio组合无法获取到渲染后的内容。

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