vite预渲染 vite-plugin-prerender 大坑记录

最新推荐文章于 2024-10-10 10:20:05 发布
最新推荐文章于 2024-10-10 10:20:05 发布
阅读量3.9k 收藏 3
点赞数 1
文章标签： 数学建模
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someWhere_weMeet/article/details/112615730
版权
文章讲述了在使用Vite和Vue3进行预渲染时遇到的TimeoutError和PageCrashed问题，以及打包后可能的404错误。作者建议在dist下创建额外的文件夹以解决预渲染问题，但这种方式可能导致不理想的URL结构。网络原因也被提及可能影响预渲染，而最佳解决方案是不需额外层级的打包方式。
摘要由CSDN通过智能技术生成

本文部分配置转自：vite预渲染怎么实现_猿耳盗铃的博客-CSDN博客

懒得重新写，贴下版本和自己踩的各种坑吧

以下为版本，本文只给vite vue3的建议，不一定适用，因为正常情况能build成功，我昨天中午之前一直没问题，能正常预渲染，中午之后到今天都是报错。

 

 下面为打包时遇到的问题：

[vite-plugin-prerender] Unable to prerender all routes!

源码里打印出来就是下面这俩：

TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded

puppeteer Error: Page crashed!

上述问题根据百度星星点点的修改方案，不适用，因为都是webpack的，vite版本的真的太少了

建议一：打包时候，dist下重新建一层文件夹，这样一般情况是可以预渲染成功（不过昨天也失败好多次）

 

build下outDir，vitePrerender下staticDir，base配置v3下， 路由配置v3下跳转。不然刷新404，

多一层访问的花，做seo很丑，www.xxx.com/v3 这种，让运维给配置下nginx吧。

上述多一层的方式虽然不完美，但是也可以讲究下。

 有说可能是网络原因导致的，具体不清楚，如果不加层级能正常打包是最好的。

someWhere_weMeet
关注
多入口+vite+vue3预渲染方案
u013776700的博客
10-15 304
如果你的项目要求加载速度要快，我们如果使用传统的vue3+sfc模式去开发，因为只有一个根节点，空白页面加载出来之后js才回去加载组件渲染，这样页面总是有一个短暂的空白。我们这里不讨论服务器端ssr和预渲染方案，仅仅是为了满足比较极端的优化需求，在这种情况下我的这套方案就是一种比较好的解决方案。
prerender:预渲染html文件
04-27
呈现 使用body标签将外部html文件渲染为静态文件。 文件系统缓存 每个文件都完全存储在本地，并且在我们为每个文件创建模板之后。 使用soket.io，用户可以呈现新模板。 为每个用户创建一个唯一的模板列表。 安装 git clone git@github.com:dmartz86/prerender.git cd prerender npm install node app.js 垃圾收集器 运行应用程序并清除public / tmp和public / templates中的文件 node app 工具 AngularJS 节点JS 引导程序 量角器 套接字 用量角器测试 npm test Finished in 5.668 seconds 3 tests, 3 assertions, 0 failures
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
立即使用Vite 无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 我们为什么不一起使用它们呢？ // vue.config.js { // ... pluginOptions : { vite : { /** * deprecated since v0.2.2. we can auto-resolve alias from
Vite Plugin Theme Preprocessor 使用教程
gitblog_00940的博客
08-21 287
Vite Plugin Theme Preprocessor 使用教程 vite-plugin-theme-preprocessor项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-theme-preprocessor 项目目录结构及介绍 vite-plugin-theme-preprocessor/ ├── src/ │ ├── inde...
vue3-ssr-test:vue3-ssr的一些测试用例
05-25
发生错误时Vue SSR内存泄漏 如何繁殖？ env ：节点10.22.0 来源：src折叠 捆绑代码： bundle_error.js ， bundle_success.js 测试代码： test_success.js ， test_error.js 首先，安装依赖项： npm install 运行错误测试： node test_error 实际发生了什么？ 您可以看到结果是这样的： blockStack一个快照是这样的： 问题是： blockStack每次执行时blockStack增长，当发生错误时， blockStack不会被释放。 期望什么？ 应该清除blockStack 。 其他资讯 我们可以看到成功的案例，在这种情况下，“我们将数据添加到btnPro”，如下所示： 然后，运行成功测试： node test_success ，我们可以看到结果是这样的： b
vue页面seo优化
weixin_65042674的博客
10-18 1103
1.使用vite-plugin-seo-prerender做页面预渲染（vite）使用npm 安装vite-plugin-seo-prerender。使用 vue-meta-info 进行配置路由元信息。这样运行run build时就可以打包多个页面。标签，并确认是否正确地包含了你设置的元信息。2.解决页面路由元信息配置问题。在需要的页面中配置路由元信息。
vite预渲染怎么实现
朱远辉的博客
05-08 2520
vite预渲染怎么实现？预渲染文件只是在构建时生成的静态 HTML 文件，将这些文件放置在服务器上供用户请求时直接访问。预渲染后的 HTML 文件不需要再依赖 JavaScript 去渲染页面，它已经包含了预处理后的 HTML、CSS 和 JS 等信息，可以直接在浏览器中打开预渲染文件，即可看到完整的网页内容和结构。因此，预渲染文件也被称为静态 HTML 文件。
Vite+Vue3 React Seo预渲染插件
dsyuan001的博客
07-07 1098
只需要puppeteer示例下加上遍历所需路由地址，然后fs保存为html即可完成一个简单的预渲染，适合所有框架，非vite框架也需稍微改动下即可。如果你还在翻遍百度查找关于vite+vue3和react的预渲染，看这篇就够了。写一个完全符合自己需求的预渲染插件。预渲染原理基本上都是启动无头浏览器，加载页面路由并将结果保存为静态HTML文件，存在很多优点。1.在项目安装无头浏览器，npm add puppeteer --dev。
vue3.0 + vite (一)页面渲染
一个超爱喝可乐的web前端攻城狮
04-26 1155
vue3.0 + vite (一)页面渲染 <template> <el-card class="account-container"> <!-- 渲染数据 --> <div class="title">{{text}}</div> </el-card> </template> <script> import { reactive, toRefs, onMounted } from "v
了解Vue3预渲染
前端咸鱼翻身的博客
05-30 6010
预渲染可以显著改善网站的性能，本文将介绍什么是预渲染，以及如何使用Vue插件在网站中应用它
Vue3+vite项目报错
Avery12的博客
10-13 430
把自己的项目想用vue3+vite重写一下，研究下新技术，结果浏览器报错 路由按vue2的写法配置的 后来升级了下vue-router的版本到最新（4.0.11），改了下l写法，就不报错了
vitedge:边缘渲染和全栈Vite框架
04-11
维特奇 适用于Vue和React的 Edge Side Rendering （ESR）框架。 什么是ESR？ 考虑一下CDN节点中的SSR（服务器端渲染），而不是实际的服务器。 今天有了 （以及不久的将来的其他一些平台），这才有可能实现。 Vitedge只是Vite app:trade_mark: ，可在边缘工作器中预渲染第一个视图，而其余视图作为SPA运行。 这意味着在保持SPA的快速路由和DX的同时，还可以带来良好的SEO。 在某些情况下，它可以代替静态站点生成器，因为它可以动态生成并在边缘进行缓存。 因此，除了从CDN中获取静态index.html ，CDN本身将动态创建它，或者如果已经访问过CDN，则从缓存中提供它（可配置的缓存年龄+失效时有效）。 尽管在边缘运行它是理想的选择，但实际上它与任何Node环境都兼容。 请参阅和。 特征 :high_voltage: 由Vite和ES模块提供支持的超快速开发和HMR。
vue-cli单页面预渲染seo-prerender-spa-plugin操作
10-14
主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vite-plugin-html-template:用于Vite的html模板，例如用于Webpack的HtmlWebpackPlugin
04-07
vite-plugin-html-template 用于ViteHTML模板，例如用于Webpack的HtmlWebpackPlugin 动机 Vite需要html作为入口文件，这意味着对于SPA我们必须具有projectRoot / index.html，对于MPA必须具有projectRoot / src / ...
vue预渲染之prerender-spa-plugin解析(二)
热门推荐
vv_bug
12-06 1万+
前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码. 附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...
react预渲染prerender-spa-plugin
weixin_33825683的博客
05-08 1495
前言: 为何使用prerender-spa-plugin？ 原因在于单页面SPA首页白屏时间长，不利于SEO优化的问题。 目前主流的解决方案：服务端渲染SSR和预渲染技术prerender-spa-plugin。 使用： 1.我们默认是创建的create-react-app项目，具体教程百度即可。 2.安装: npm install prerender-spa-plugin --save 复制...
vue的seo方案 prerender-seo-plugin
weixin_30388677的博客
04-18 145
利用vue cli 3.0安装脚手架。记住：勾选vue-router。 在vue.config.js里添加配置： 2， var path = require('path') 3， const PrerenderSPAPlugin = require('prerender-spa-plugin'); 4， const Renderer = PrerenderSPAPlugin.P...
关于vite-plugin-prerender打包问题解决方案
最新发布
shimadongxue的博客
10-10 377
vite-plugin-prerender 打包有问题；
vite-plugin-seo-prerende路由单独打包成静态
qq_42765776的博客
06-14 378
vite-plugin-seo-prerende路由单独打包成静态
vite-plugin-svg-icons部分引用
03-30
vite-plugin-svg-icons是一个Vite插件，用于在Vue项目中方便地引入和使用SVG图标。它可以将SVG图标文件自动转换为Vue组件，并提供了一些方便的功能来管理和使用这些图标。 使用vite-plugin-svg-icons，你可以通过以下步骤来引入SVG图标： 1. 首先，在你的Vue项目中安装vite-plugin-svg-icons插件。可以使用npm或yarn命令进行安装： ``` npm install vite-plugin-svg-icons --save-dev ``` 2. 在Vite的配置文件（vite.config.js）中，添加对vite-plugin-svg-icons的配置： ```javascript import { defineConfig } from 'vite' import svgIcons from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ svgIcons() ] }) ``` 3. 在你的Vue组件中，使用`<svg-icon>`标签来引入SVG图标。你可以通过指定`name`属性来指定要使用的图标名称，例如： ```vue <template> <div> <svg-icon name="icon-name" /> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ // ... }) </script> ``` 这样，vite-plugin-svg-icons会自动将名为`icon-name.svg`的SVG图标文件转换为Vue组件，并在编译时进行引入和使用。 以上就是使用vite-plugin-svg-icons插件部分引用SVG图标的简要介绍。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值