PhantomJS+Vue3截图报错：无法修改不可配置属性的setter

问题原因 #

PhantomJS 2.1.1是2016年发布的老旧版本，对ES6+语法、现代DOM API的支持严重不足。Vue项目的响应式系统及页面渲染逻辑中，存在修改不可配置属性setter的操作，这在PhantomJS的老旧JS引擎中会触发TypeError: Attempting to change the setter of an unconfigurable property错误，同时页面因渲染异常未完成加载，最终生成带加载图标的空白截图。

解决方案 #

方案1：替换为现代无头浏览器工具（推荐） #

PhantomJS已停止维护，建议切换到Puppeteer或Playwright，它们基于Chrome/Chromium内核，对现代前端框架支持完善。

以Puppeteer为例，编写截图脚本：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 等待网络请求完成后再截图
  await page.goto('http://localhost:8080/login', { waitUntil: 'networkidle2' });
  await page.screenshot({ path: 'login.png' });
  await browser.close();
})();

安装命令：

npm install puppeteer

方案2：继续使用PhantomJS的兼容处理 #

如果必须保留PhantomJS，可尝试以下步骤：

• 添加启动参数，解决资源加载限制
  运行脚本时加上安全与SSL忽略参数：

  phantomjs --web-security=false --ignore-ssl-errors=true your-script.js
  

• 确保Vue页面完全渲染
  替换固定超时为Vue挂载完成的检测：

  1. 在Vue登录页组件的mounted钩子中暴露全局标记：

     mounted() {
       window.__VUE_READY__ = true;
     }
     

  2. 修改PhantomJS脚本，等待标记后再截图：

     'use strict'
     
     var page = require("webpage").create();
     
     page.open("http://localhost:8080/login", function (status) {
       if (status !== 'success') {
         console.log('页面加载失败');
         phantom.exit();
         return;
       }
     
       const checkInterval = setInterval(() => {
         const isVueReady = page.evaluate(() => window.__VUE_READY__ === true);
         if (isVueReady) {
           clearInterval(checkInterval);
           page.render("login.png");
           phantom.exit();
         }
       }, 500);
     
       // 超时兜底，避免无限等待
       setTimeout(() => {
         clearInterval(checkInterval);
         page.render("login.png");
         phantom.exit();
       }, 15000);
     });
     

• 禁用Vue的生产提示
  在Vue项目入口文件中添加：

  Vue.config.productionTip = false;
  

  减少可能触发兼容问题的额外代码。

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