Vue进阶（幺陆伍）PhantomJS 实战讲解_vue phantomjs-程序员宅基地

文章目录

一、前言

Vue项目在编译阶段，报如下错误：

npm ERR! PhantomJS not found on PATH

因为依赖包在编译过程中可能会涉及脚本执行，但是脚本执行环境有误，导致以上报错信息，解决方法就是应用--ignore-scripts选项单独安装phantomjs：

npm install phantomjs@2.1.1 --ignore-scripts

npm提供的--ignore-scripts选项，该选项将忽略所有预install、install、postinstall脚本的执行。这个选项可以用于提高安装速度，也可用于解决一些由于脚本执行顺序问题导致的依赖安装失败问题。

需要注意的是，使用--ignore-scripts选项不会完全禁用所有脚本的执行，只是在安装过程中忽略掉所有脚本的执行。如果我们需要手动执行某个脚本，可以使用npm run命令来运行指定脚本。

在前期博文《Vue进阶（五十六）：vue-cli 脚手架 karma.conf.js 配置文件详解》中讲解了 karma.conf.js 文件用于配置前端项目自动化测试信息。在其配置文件中有如下配置信息：

 // 这里使用的是PhantomJS作为浏览器测试环境，这个插件支持 DOM, CSS, JSON, Canvas, and SVG 的解析
browsers: ['PhantomJS'],

其中，使用了PhantomJS作为无头浏览器测试环境。PhantomJS具体作用是什么呢？本篇博文带你一探究竟。

二、PhantomJS

PhantomJS is a headless WebKit scriptable with a JavaScript API.

PhantomJS是一个基于webkit的javaScript API。它使用QtWebKit作为核心浏览器的功能，使用webkit来编译解释执行javaScript代码。任何可以基于在webkit浏览器做的事情，它都能做到。

它不仅是个隐性无头浏览器，提供了诸如css选择器、支持web标准、DOM操作、json、HTML5等，且同时也提供了处理文件I/O的操作，从而可以向操作系统读写文件等。phantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的web测试、页面访问自动化等。

无头浏览器：一个完整的浏览器内核,包括js解析引擎,渲染引擎,请求处理等,但是不包括显示和用户交互页面的浏览器。

2.1 PhantomJS 使用场景

PhantomJS的适用范围就是无头浏览器的适用范围。通常无头浏览器可以用于页面自动化，网页监控，网络爬虫等：

页面自动化测试：希望自动登陆网站并做一些操作然后检查结果是否正常。
网页监控：希望定期打开页面，检查网站是否能正常加载，加载结果是否符合预期。加载速度如何等。
网络爬虫：获取页面中使用js来下载和渲染信息，或者是获取链接处使用js来跳转后的真实地址。

2.2 PhantomJS 项目实战

2.2.1 环境配置

首先，下载 PhantomJS。

在这里插入图片描述

下载完成后，直接解压到桌面。然后找到文件夹bin目录下的exe文件的路径。

在这里插入图片描述

复制该路径，找到环境变量中的path，然后把刚才复制的路径粘贴，然后确定。

在这里插入图片描述
最后，打开phantomjs\bin文件夹，双击运行phantomjs.exe，如出现如下界面，就可以运行JS代码了。

在这里插入图片描述

2.2.2 Demo: 自动化截图

首先，编写截屏程序。

var webPage = require('webpage');
var page = webPage.create();

page.open("http://www.baidu.com", function start(status) {
    
  page.render('baidu.jpeg');
  phantom.exit();
});

保存为helloWorld.js，然后我在控制台内输入：

phantomjs.exe helloWorld.js

接下来，解读下上述代码的实现逻辑：

var webPage = require('webpage');
var page = webPage.create();

这一句是告诉Phantomjs 我们需要webpagae模型，第二句是创建具体使用对象page。目前Phantom提供的模型有：

webpage：最重要的模型，包括打开URL，回退，获取正文、标题，发送事件等；
child_process：子进程，在不影响主进程情况下。可以用来输入输出，执行JS等操作；
fs：文件系统，用于写本地文件；
system：系统，接受参数等；
webserver：开放一个端口，搭建一个Phantom的服务。

page.open("http://www.baidu.com", function start(status) {
    ...});

以上语句是告诉PhantomJS我们要打开的页面是http://www.baidu.com，并在打开完成后调用start回调函数。在所有的PhantomJS的对象内，函数都是回调的。

page.render('baidu.jpeg');
phantom.exit();

render这个函数是表示将当前页面绘制回来，并保持到baidu.jpeg内。
Phantom.exit()是退出程序。

phantome.exe  helloWorld.js

使用PhantomJS来执行helloWorld.js这个文件。实际上，在执行JS的时候，可以指定一些参数。比较重要的有：

cookies-file：cookie文件路径；
load-images：是否加载图片；
local-to-remote-url-access：是否允许访问远程地址；
proxy：代理设置；
script-encoding：页面编码；
web-security：允许跨站请求；
ssl-protocol：ssl请求设置；

更多接口详情，详参Phantoms 官方文档。

三、拓展阅读

本文链接：https://blog.csdn.net/sunhuaqiang1/article/details/133861735

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构