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 相关文章推荐
让table变成exls的示例代码
Mar 24 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 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显示时间常用方法小结
2015/06/05 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python多进程操作实例
2014/11/21 Python
Python实现简单字典树的方法
2016/04/29 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
学生处主任岗位职责
2013/12/01 职场文书
会计工作心得体会
2014/01/13 职场文书
中国好声音广告词
2014/03/18 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
个人工作表现自我评价
2015/03/06 职场文书