prerender-spa-plugin使用总结

1. 介绍

prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大,所以很简单就能将运行时的 HTML 打包到文件中。原理是在 Webpack 构建阶段的最后,在本地启动一个 Puppeteer 的服务,访问配置了预渲染的路由,然后将 Puppeteer 中渲染的页面输出到 HTML 文件中,并建立路由对应的目录

2. Unable to prerender all routes!

  • 1、由于webpack5: mkdirp is no longer expected to be a function on the output file system,如果当前使用的是webpack5版本,需更新插件代码。
  • 2、作者提交的修复版本的分支 https://github.com/jsbugwang/prerender-spa-plugin/tree/webpack5
  • 3、ps:该分支漏了 const fs = require('fs') 的声明,需自行加上
  • 4、ps:可在 perrender-spa-plugin/es6/index.js 中,代码 console.error(msg) 处添加 console.log(err) 输出具体报错原因,以定位问题

3. pyppeteer.errors.TimeoutError: Navigation Timeout Exceeded: 30000 ms.

  • 1、预渲染的路由过多,超过pyppeteer默认的超时时间,减少打包的路由
  • 2、设置 maxConcurrentRoutes: 10

4. 设置publicPath二级目录后,预渲染白屏

  • 1、publicPath: process.env.NODE_ENV === 'production' ? '/vue' : '/'
  • 2、outputDir: path.join(__dirname, 'dist', '/vue')
  • 3、参考链接 https://github.com/chrisvfritz/prerender-spa-plugin/issues/344 #takatama, #cnvoa 的评论
    具体配置如下:
new PrerenderSPAPlugin({indexPath: path.join(__dirname, 'dist/vue/index.html'),// Required - The path to the webpack-outputted app to prerender.staticDir: path.join(__dirname, 'dist'),// Optional - The path your rendered app should be output to.// (Defaults to staticDir.)outputDir: path.join(__dirname, 'dist/vue'),// Required - Routes to render.routes: ['/'],renderer: new Renderer({headless: true, // 是否隐藏无头浏览器(调试时可开启)renderAfterTime: 5000,}),server: {proxy: {'/api': {target: 'http://www.a.c',changOrigin: true,secure: false,},},},
})

5. 预渲染未请求接口数据(一)

  • 1、在配置插件中增加 headless: false ,用以开启无头浏览器进行调试,查看console面板中的错误
  • 2、定位到问题出在发起的接口请求中,打印返回内容为html文本
  • 3、打印查看接口请求地址,为 http://localhost:8080/api/xxx ,原因是代码中接口请求路径为缺省域名的写法,请求时会自动补全当前网页所在的域名
  • 4、更改代码中的请求,补全请求地址,如:http://www.a.c/api/xxx (由于此做法会有跨域问题,并未采用)
  • 5、查看PrerenderSPAPlugin源码发现其使用的服务为express框架,并用到了http-proxy-middleware反向代理,所以只要在插件中增加配置 server 即可解决,具体配置方法与http-proxy-middleware一致

6. 预渲染未请求接口数据(二)

  • 1、在配置插件中增加 headless: false ,用以开启无头浏览器进行调试,查看console面板中的错误
  • 2、接口请求返回500错误,打包界面提示 ERR_TLS_CERT_ALTNAME_INVALID 错误代码
  • 3、定位问题为https证书验证的问题
  • 4、首先确认nginx中的https配置ssl协议是否如下 ssl_protocols: TLSv1 TLSv1.1 TLSv1.2
  • 5、在proxy中增加配置信息 secure: false 以关闭ssl证书验证
    具体配置如下:
new PrerenderSPAPlugin({// Required - The path to the webpack-outputted app to prerender.staticDir: path.join(__dirname, 'dist'),// Optional - The path your rendered app should be output to.// (Defaults to staticDir.)outputDir: path.join(__dirname, 'dist'),// Required - Routes to render.routes: ['/'],renderer: new Renderer({headless: true, // 是否隐藏无头浏览器(调试时可开启)renderAfterTime: 5000,}),server: {proxy: {'/api': {target: 'http://www.a.c',changOrigin: true,secure: false,},},},
})

7. 使用限制

prerender-spa-plugin 仅适用于 history 模式,若为 hash 模式,那么 routes 配置只有根路由可被成功预渲染。

References

[1] https://github.com/chrisvfritz/prerender-spa-plugin

[2] https://github.com/jsbugwang/prerender-spa-plugin/tree/webpack5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 Golang 应用程序中管理多个数据库

掌握在 Golang 项目中处理多个数据库的艺术 在当前软件开发领域中,处理单个应用程序内的多个数据库的需求越来越普遍。具有强大功能的 Golang 是处理此类任务的绝佳解决方案,无论您是与多个数据源合作还是仅为增强组织和可扩展性而分隔数据。在本文中&a…

FastAPI使用异步Redis

1. 安装依赖 pip install fastapi redis uvicorn 2. 主要代码 #!/usr/bin/env python import os import sys from contextlib import AbstractAsyncContextManager, asynccontextmanager from datetime import timedelta from pathlib import Pathfrom fastapi import FastA…

Java开发框架和中间件面试题(7)

目录 63.Spring中都应用了哪些设计模式? 64.请举例说明如何在Spring中注入一个Java Collection? 65.说一下都有哪些基本理念? 67.Spring Bean的生命周期? 68.说说Spring AOP的实现原理? 69.Spring中事务的实现方…

vue3导入excel并解析excel数据渲染到表格中,纯前端实现。

需求 用户将已有的excel上传到系统,并将excel数据同步到页面的表格中进行二次编辑,由于excel数据不是最终数据,只是批量的一个初始模板,后端不需要存储,所以该功能由前端独立完成。 吐槽 系统中文件上传下载预览三部…

在pytorch中,读取GPU上张量的数值 (数据从GPU到CPU) 的几种常用方法

1、.cpu() 方法: 使用 .cpu() 方法可以将张量从 GPU 移动到 CPU。这是一种简便的方法,常用于在进行 CPU 上的操作之前将数据从 GPU 取回 import torch# 在 GPU 上创建一个张量 gpu_tensor torch.tensor([1, 2, 3], devicecuda)# 将 GPU 上的张…

AI赋能金融创新:技术驱动的未来金融革命

人工智能(AI)作为一种技术手段,正逐渐改变金融行业的方方面面。从风险管理到客户体验,从交易执行到反欺诈,AI带来了许多创新和机遇。本文将探讨AI在金融领域的应用和其赋能的金融创新。 金融领域一直以来都面临着复杂的…

QT UI自动化测试(1)

一、框架选择 想结合公司产品搭建一套自动化测试框架,一方面自己学习用,一方面也希望跟公司业务结合起来,双赢。公司软件最多的产品是部署在Linux系统上,基于QT QML开发的UI,本来奔着免费的自动化框架去的,…

编写html的vscode快捷键

一快速生成 按住!(英文的),回车。 二快捷键 1.代码格式化 用来对齐标签。整理代码,强迫症患者必备。 shiftaltf 2.快速移动一行 altdown altup 向上或向下移动一行 3.快速复制一行代码 ShiftAltUp ShiftAltDown 4.快速保存 Ctrl S 5.快速查…

ViT的极简pytorch实现及其即插即用

先放一张ViT的网络图 可以看到是把图像分割成小块,像NLP的句子那样按顺序进入transformer,经过MLP后,输出类别。每个小块是16x16,进入Linear Projection of Flattened Patches, 在每个的开头加上cls token和位置信息,…

C++项目之酒店客房管理系统架构——设计模式应用场景详解(上)

在C++酒店客房管理系统中,可以使用以下设计模式来架构程序: 1. 单例模式(Singleton Pattern):用于确保系统中只有一个客房管理系统实例。这样可以确保整个系统中只有一个唯一的实例,方便管理和控制。 通过私有的构造函数和静态的getInstance方法来控制实例的创建。getI…

Mysql5.7主从数据库同步失败(日记文件错误)解决记录

记录一次Mysql主从数据库同步失败(日记文件错误)解决记录 查看同步状态: 具体错误: 检查mysql数据库日记 2021-06-10T03:45:43.522398Z 1 [ERROR] Error reading packet from server for channel : event read from binlog did not pass crc check; the…

Oracle 拼接字符串

语法 使用||拼接如果内容中有单引号,则可在该单引号前面再加一个单引号进行转义 例子 比如有一个业务是根据需要生成多条插入语句 select insert into des_account_des_role(des_account_id, roles_id) values( || id || , || (select id from des_role where wo…

Ps:八大混合模式及其在色彩渲染上的运用

在所有的图层混合模式中,有八种比较特别。 特别之处在于,其它的混合模式在修改图层的“不透明度”或“填充”时,效果是一样的。 而这八种混合模式使用“填充”比使用“不透明度”可带来更好的效果,有时甚至可以说是惊艳。 提示&am…

ubuntu下编译obs-studio遇到的问题记录

参考的是这篇文档:Build Instructions For Linux obsproject/obs-studio Wiki GitHub 在安装OBS dependencies时, sudo apt install libavcodec-dev libavdevice-dev libavfilter-dev libavformat-dev libavutil-dev libswresample-dev libswscale-d…

[ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择

文章目录 一、前言二、Amazon SNS 服务(Amazon Simple Notification Service)三、Amazon SQS 服务(Amazon Simple Queue Service)四、SNS 与 SQS 的区别(本文重点)4.1 基于推送和轮询区别4.2 消费者数量对应…

HBuilder常用的快捷键

查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置,前后端开发环境的配置,编辑器的配置,网络服务的配置,网络命令的应用与配置,windows常见问题的解决等。 文章目录 常用快捷键分9项快捷键1.文件(4)2.编辑(13)3.…

网络安全应急响应工具之-流量安全取证NetworkMiner

在前面的一些文章中,用了很多的章节介绍流量分析和捕获工具wireshark。Wireshark是一款通用的网络协议分析工具,非常强大,关于wireshark的更多介绍,请关注专栏,wireshark从入门到精通。本文将介绍一个专注于网络流量取…

计算机网络【DHCP动态主机配置协议】

DHCP 出现 电脑或手机需要 IP 地址才能上网。大刘有两台电脑和两台手机,小美有一台笔记本电脑、一台平板电脑和两台手机,老王、阿丽、敏敏也有几台终端设备。如果为每台设备手动配置 IP 地址,那会非常繁琐,一点儿也不方便。特别是…

华为OD机试 - 路口最短时间问题(Java JS Python C)

题目描述 假定街道是棋盘型的,每格距离相等,车辆通过每格街道需要时间均为 timePerRoad; 街道的街口(交叉点)有交通灯,灯的周期 T(=lights[row][col])各不相同; 车辆可直行、左转和右转,其中直行和左转需要等相应 T 时间的交通灯才可通行,右转无需等待。 现给出…

k8s:kubernets

自动部署、自动扩展和管理的容器化部署的应用程序的一个开源系统 k8s负责自动化运维管理多个容器化程序的集群,是一个功能强大的容器编排工具 可以以分布式和集群化的方式进行容器管理 1.18版本,目前最多的是1.20版本,最新的是1.29版本&am…