VUE预渲染及遇到的坑


Posted in Javascript onSeptember 03, 2018

本文介绍了VUE预渲染及遇到的坑,分享给大家,具体如下:

npm install -D prerender-spa-plugin

修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。

var PrerenderSpaPlugin = require('prerender-spa-plugin')
 
new PrerenderSpaPlugin(
  //将渲染的文件放到dist目录下
   path.join(__dirname, '../dist'),  
   //需要预渲染的路由信息
   [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
   {
   //在一定时间后再捕获页面信息,使得页面数据信息加载完成
    captureAfterTime: 50000,
    //忽略打包错误
    ignoreJSErrors: true,
    phantomOptions: '--web-security=false',
    maxAttempts: 10,
   }
  ),

遇到的问题

1.下载prerender-spa-plugin 失败解决方案

我更新prerender-spa-plugin   发现运行 下去都是  error报错 安装不成功,

但是他会提示你对downloading  什么文件  保存到哪个位置对吧,

VUE预渲染及遇到的坑

把他提示着  这个在浏览器 输入,我的是下面这个

//windows
http://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
 
//MAC
https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip

也就是把  downloading后面的  链接 下载下来,然后放在他saving提示的目录下

windows

C:\Users\hasee\AppData\Local\Temp\phantomjs

MAC路径

/var/folders/sf/gyxbw5_s1sq45fb6hs5l_77m0000gn/T/phantomjs/

不用解压,保留  .zip就好,然后你在更新下  prerender-spa-plugin

npm install prerender-spa-plugin

2. 安装puppeteer报错

VUE预渲染及遇到的坑

Puppeteer 至少需要 Node v6.4.0,如要使用 async / await,只有 Node v7.6.0 或更高版本才支持。 node下载地址: https://nodejs.org/zh-cn/

是因为在执行安装的过程中需要执行install.js,这里会下载Chromium,官网建议是进行跳过,我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium (因为封网,直接下载会失败)

 1

npm i --save puppeteer --ignore-scripts

网上的另一种方法:

1.创建项目crawl

2. npm init

VUE预渲染及遇到的坑

3.cmd 

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

VUE预渲染及遇到的坑

4.npm install

5.npm -i puppeteer

puppeteer下载完成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js倒计时小程序
Nov 05 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
jquery延迟对象解析
Oct 26 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
JavaScript实现京东快递单号查询
Nov 30 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 #Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
You might like
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python next()和iter()函数原理解析
2020/02/07 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
爱国主义演讲稿
2014/05/07 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
百万英镑观后感
2015/06/09 职场文书
公司老总年会致辞
2015/07/30 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技