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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
使用php4加速网络传输
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JavaScript 指导方针
2007/04/05 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
机器学习python实战之手写数字识别
2017/11/01 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Django实现网页分页功能
2019/10/31 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
中学校庆方案
2014/03/17 职场文书
社团活动总结模板
2014/06/30 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
解除施工合同协议书
2014/10/17 职场文书
师德标兵事迹材料
2014/12/19 职场文书
感恩主题班会教案
2015/08/12 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js