VUE预渲染及遇到的坑
作者:寒星冷雨 发布时间:2023-07-02 17:08:34
本文介绍了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 什么文件 保存到哪个位置对吧,
把他提示着 这个在浏览器 输入,我的是下面这个
//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报错
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
3.cmd
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
4.npm install
5.npm -i puppeteer
puppeteer下载完成
来源:https://blog.csdn.net/wangshu696/article/details/81253124
猜你喜欢
- 正常的页面跳转的api大家应该都清楚,但是涉及到多页面来回跳转以及返回到导航页的时候就需要一些技巧来进行处理,之前找了挺多文章也没有很详细的
- 因为工作原因,需要定期清理某个文件夹下面创建时间超过1年的所有文件,所以今天集中学习了一下Python对于本地文件及文件夹的操作。网上 这篇
- 本文实例讲述了Python获取基金网站网页内容、使用BeautifulSoup库分析html操作。分享给大家供大家参考,具体如下:利用 ur
- 在通过拼组sql语句来实现数据插入的应用中,我们很有可能会遇到需要插入大型数据的情况,例如,在oracle中需要插入字节数超过4000的字段
- 按照下面一步一步来,安 * p就是这么简单。脚本之家下载渗透测试软件Burp Suite Professionalhttps://www.jb
- 临时对象池 pool 是啥?sync.Pool 给了一大段注释来说明 pool 是啥,我们看看这段都说了些什么。临时对象池是一些可以分别存储
- pymysql模块的使用查询一条数据fetchone()from pymysql import *conn = connect(  
- 0. 前言本节中,我们使用策略梯度算法解决 CartPole 问题。虽然在这个简单问题中,使用随机搜索策略和爬山算法就足
- 原理 :1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。2、js获取创建的DIV并改变其top属性值,当下落
- 编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用。读了这篇文章之后,
- 功能: 1、 允许/限制对表的修改 2、 自动生成派生列,比如自增字段 3、 强制数据一致性 4、 提供审计和日志记录 5、 防止无效的事务
- 如下所示:# x = ['c b a',"e d f"]# y = []# for i in x:# f
- 用opencv处理一下pillow也可以,但是试过有时候会把图片自动旋转180°,cv没有这个问题import osfrom
- vue项目页面空白但不报错产生的原因分析vue项目中我们请求一个路由,打开页面发现页面是空白的,产生的主要原因有四种:1.路由重复如果配置了
- python实现取余操作的方法:可以利用求模运算符(%)来实现。求模运算符可以将两个数相除得到其余数。我们还可以使用divmod()函数来实
- 1.概述Go的字符串是一个不可改变的数据结构,这和其他语言如JAVA,C++等的设定很类似.总体来说,有如下五种拼接方式,下面我们将论述各种
- 调整形状 调整形状 reshape, resize, flatten
- 前言采集教务系统成绩单是一个非常有意义的项目。在现代教育中,教务系统已经成为了学校管理和教学工作的重要组成部分。然而,由于各种原因,教务系统
- 无意中看到百度的页面代码,想到了一种声明写法,需要的朋友可以参考下。<!DOCTYPE html> <!--[if IE]
- 一 代码编排1 缩进4个空格的缩进(编辑器都可以完成此功能),不要使用Tap,更不能混合使用Tap和空格。2 每行最大长度79,换行可以使用