prerender-spa-plugin：Unable to prerender all routes(亲测有效)

已于 2023-01-31 16:17:27 修改
阅读量7.9k 收藏 1
点赞数 3
分类专栏： 报错记录 文章标签： 前端 javascript 开发语言
于 2022-10-12 22:16:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44472722/article/details/127291920
版权

使用prerender-spa-plugin打包报错
mac下这里设置为 headless: true,
更换插件

yarn add @dreysolano/prerender-spa-plugin

const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');

因为使用了webpack5 有些插件没有更新导致的

one.dream(相亲)
关注
专栏目录
记一个webpack [prerender-spa-plugin] Unable to prerender all routes! 问题
蛐蛐的博客
09-29 1499
1.简介 使用prerender-spa-plugin做预渲染，但是每次都是跑了一会，然后报错 2.解决 TimeoutError: Navigation Timeout exceeded: 30000ms exceeded 找源码，node_modules/prerender-spa-plugin/es6/index.js，143行 .catch(err => { const msg = '[prerender-spa-plugin] Unabl..
prerender-spa-plugin使用总结
m0_37728716的博客
12-29 2062
prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大，所以很简单就能将运行时的 HTML 打包到文件中。
vue2项目 预渲染 Unable to prerender all routes 错误排查与解决方案
最新发布
qq_44849312的博客
08-23 546
今天在做我的Vue2项目的SEO优化时，我采用了prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。但是，在打包时，报错Unable to prerender all routes。尝试了很多种网上方案，都没有成功，最后从源码排除终于找到了原因。
打包时出现： Unable to prerender all routes
weixin_51244498的博客
11-26 5005
周三工作打包的时候，npm run build 还像往常工作一样打包给后端，然后周四我正常修改问题，准备打包给后端的时候，就发现一直打包不了，然后界面就显示一直在打包中，打了20分钟，30分钟都没成功，最后暴出问题：[prerender-spa-plugin] Unable to prerender all routes! 试了好久，终于打包成功了 在\node_modules\prerender-spa-plugin\es6\index.js中第113行 await page.goto(`${ba.
prerender-spa-plugin-next打包安装错误处理
weixin_46525113的博客
11-30 3670
vue3(vuecil5)预渲染处理prerender-spa-plugin-next针对单页面的seo处理，解决prerender-spa-plugin报错Unable to prerender all routes!，或者打包一直卡着不动的问题。
prerender-spa-plugin报错处理，prerender-spa-plugin-next长江后浪
RequesToGod的博客
08-10 4537
由于业务需求需要用到预渲染，vite+vue3没有找到好的库。考虑使用prerender-spa-plugin这个插件满足需求。以下是我的配置信息。使用过程中诸多报错，但后续都以解决。最终卡在这个条报错信息上。...
vue 使用 prerender-spa-plugin vue-meta-info seo优化可能出现的问题
-夜雨阑珊的博客
06-17 825
1. vue项目会遇到不存在有vue.config.js的问题出现但是大多数教程使用的都是在vue.config.js中去修改并且添加内容 staticDir: path.join(__dirname, 'dist'), // 输出这段代码原本都是在vue.config.js中设置的，所以会导致在webpack的文件使用中会导不出去的情况，并且会出现一直卡在浏览器读取不到页面的情况，演变成一直在打包需要把输出的位置指定到dist文件夹上才可以在没有vue.config.js的情况下在webpack.pr
vue-cli单页面预渲染seo-prerender-spa-plugin操作
10-14
预渲染插件 `prerender-spa-plugin` 正是为此目的设计的。它可以在构建过程中生成预渲染的HTML文件，以便搜索引擎可以看到页面的初始内容。以下是使用 `prerender-spa-plugin` 的详细步骤： 1. 安装插件： 如果你...
vue单页面seo(prerender-spa-plugin,vue-meta-info)
01-13
为了解决这个问题，开发者可以使用 `prerender-spa-plugin` 和 `vue-meta-info` 这两个工具来优化Vue.js应用的SEO。 `prerender-spa-plugin` 是一个Vue CLI插件，用于在构建时预先渲染Vue.js应用程序的特定路由。预...
prerender-spa-plugin 预渲染
weixin_47049504的博客
03-11 3253
seo 优化
谈谈我在vue-cli3中用预渲染遇到的坑
01-19
前言 在开发自己的个人网站的时候后，选择了用vue来开发，不可避免的遇到要对seo做优化。鉴于目前页面也不多，因此首先采用的是预渲染的方式。 本来以为把插件一装，配置一配，咔咔咔就能搞定，结果发现并没有想的那么简单。因为首先就遇到了两个报错，折腾了半个晚上。 问题及解决方案 第一个报错： Unable to prerender all routes! 这个问题是在设置好配置之后，build的时候报出来的。主要症状就是打开了浏览器后卡主不动，然后就强制退出了。 解决方案： 参考了github上的issus https://github.com/chrisvfritz/preren
如何使用prerender-spa-plugin插件，对页面进行预渲染
厦门在乎科技
09-30 2470
背景 因为之前的网站是使用Vue开发的，这种前端JavaScript渲染的开发模式，对于搜索引擎来说非常的不友好，没有办法抓取到有效的信息。因此为了进行SEO，我们需要对页面进行一些预渲染。 预渲染比较适合静态或者变化不大的页面，能够通过部署前的一次静态渲染，将页面上大部分内容都渲染出来。这样搜索引擎在爬取的时候，就能够爬到相关的内容信息。 现状 目前商企通官网情况列举如下： 技术栈使用的是Vue，脚手架使用的是vue-cli，使用JavaScript前端渲染方案（这个方案对技术栈没有要求，兼容所
VUE（cli3.0） 使用prerender-spa-plugin + vue-meta-info做SEO和预渲染的效果及处理 prerender-spa-plugin 打包出错
qq_39235055的博客
06-10 2809
prerender-spa-plugin + vue-meta-info 做SEO和预渲染的效果 首先说说 prerender-spa-plugin 这玩意儿 这个就弄预渲染，好处就是预渲染可以极大的提高网页访问速度，配合一些meat插件，就可以可以满足SEO需求，尤其是开发到一半的项目没有配置SSR有需要SEO的需求，这个时候prerender-spa-plugin + vue-meta-info 就可以达到要求 1.安装 （我用的npm） npm install --save prerender-spa
vue下载prerender-spa-plugin插件报错
weixin_34014277的博客
04-12 561
为什么要使用prerender-spa-plugin 主要原因有两点： 1、SEO：SPA应用的SEO比较差，爬虫爬到的页面结构大多只有入口页，然而入口页又几乎没有什么内容，因此搜索排名很低。 2、首屏体验：由webpack生成的入口页基本上只有一个主js，本身页面没有内容，因此在这个js加载完成之前，用户看到的都是一片空白。为了解决这个问题，一般是把规定好的静态页给后台，用户请求直接返回的是静态...
react预渲染prerender-spa-plugin
weixin_33825683的博客
05-08 1488
前言: 为何使用prerender-spa-plugin？ 原因在于单页面SPA首页白屏时间长，不利于SEO优化的问题。 目前主流的解决方案：服务端渲染SSR和预渲染技术prerender-spa-plugin。 使用： 1.我们默认是创建的create-react-app项目，具体教程百度即可。 2.安装: npm install prerender-spa-plugin --save 复制...
Quasar prerender-spa-plugin 踩坑指南
chengxi1014的博客
12-13 1484
先讲正确的配置: 1.App.vue里面添加 mounted() { document.dispatchEvent(new Event('render-event'));//加载完发布这个事件 } 添加位置如图 2.使用@dreysolano/prerender-spa-plugin 而不是原版的prerender-spa-plugin,原因是: 原版有bug,详情见 [prerender-spa-plugin] Unable to prerender all routes..
在vue项目中使用prerender-spa-plugin预渲染
weixin_45979310的博客
10-27 183
一、安装： npm install prerender-spa-plugin --save 二、路由router模式为 history ： const router = new VueRouter({ mode: 'history', routes }) 三、配置入口文件 main.js ： new Vue({ router, render: h => h(App), mounted () { // document.dispatchEven
vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
qq_15603061的博客
04-22 219
vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种： SSR服务器渲染,如Nuxt.js。 预渲染模式，这比服务端渲染要简单很多，而且可以配合 vue-meta-info 来生成title和meta标签，基本可以满足SEO的需求 注意： 使用预渲染vue-router必须使用history模式 build生成的代码必须放在服务器根目录，否则会报错 可参考官...
vue项目怎么改成prerender-spa-plugin
06-02
要将Vue项目改为使用prerender-spa-plugin，需要进行以下步骤： 1. 安装prerender-spa-plugin插件： ``` npm install prerender-spa-plugin --save-dev ``` 2. 在webpack配置文件中引入插件： ``` const PrerenderSPAPlugin = require('prerender-spa-plugin'); ``` 3. 在plugins数组中添加插件配置： ``` plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about', '/contact'], // 可选项，生成的文件存储的路径，默认为 `./prerendered` outputDir: path.join(__dirname, 'prerendered'), // 可选项，生成文件的后缀名，默认为 `.html` postProcess (renderedRoute) { // 对渲染后的路由文件进行额外处理 } }) ] ``` 4. 在`package.json`文件中添加一个脚本： ``` "scripts": { "prerender": "npm run build && node prerender.js" } ``` 5. 创建一个名为`prerender.js`的文件，并添加以下代码： ``` const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); const rendererPath = path.join(__dirname, 'dist', 'server', 'bundle.js'); const renderer = require(rendererPath); const options = { staticDir: path.join(__dirname, 'dist'), routes: ['/'], renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ renderAfterDocumentEvent: 'render-event', headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], }), }; const prerenderer = new PrerenderSPAPlugin(options); prerenderer .initialize() .then(() => { return prerenderer.renderRoutes(['/']); }) .then((renderedRoutes) => { console.log('Prerendering successful!'); console.log(renderedRoutes); }) .catch((error) => { console.error('Prerendering failed:'); console.error(error); }); ``` 6. 运行`npm run prerender`命令，生成预渲染文件。 以上就是将Vue项目改为使用prerender-spa-plugin的步骤。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值