vue2项目 预渲染 Unable to prerender all routes 错误排查与解决方案

前言

今天在做我的Vue2项目的SEO优化时,我采用了prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。

但是,在打包时,报错Unable to prerender all routes。尝试了很多种网上方案,都没有成功,最后从源码排除终于找到了原因。

排除过程

报错提示很模糊,我打开node_modules查看他的源码,在源码中找到报错输出位置,我们加入一行代码的输出报错:

再打包一次,显示了真正的错误信息:

compilerFS.mkdirp方法不存在。

后面了解到,compilerFS这个插件已经好几年没有更新,而我们当前使用的是webpack5,出现了API变更的情况。

于此同时,根据错误提示,我们也在该库的issues中找到了历史讨论。

在讨论中,了解到,可以使用已经修改好了的库

复制代码
cnpm i @dreysolano/prerender-spa-plugin

然后重新修改vue.config.js

复制代码
// const PrerenderSPAPlugin = require('prerender-spa-plugin')  //原来引用的库,注释掉,不用了
 const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')

然后再次打包测试,打包成功!

相关推荐
Humbunklung14 分钟前
DeepSeek辅助写一个Vue3页面
前端·javascript·vue.js
二闹1 小时前
🚀 JavaScript性能优化实战:让你的JS代码从拖拉机变超跑!🏎️💨
前端·javascript·性能优化
jstopo网站1 小时前
可拖拽配置3d地下停车场大屏
前端·javascript
onceco1 小时前
使用duckduckgo_search python api 进行免费且不限次数的搜索
开发语言·python·搜索引擎
烛阴1 小时前
💻 从0到1掌握CSS选择器:精准元素定位的终极指南
前端·javascript·css
实习生小黄1 小时前
使用psd.js将psd路径转成svg格式
前端·javascript·svg
Hilaku2 小时前
尤雨溪都没告诉你的 setup() 技巧
前端·javascript·vue.js
刘政feng啊2 小时前
手写 Vue2.0 响应式源码 - 理解为何有时修改数据无法触发响应式更新
vue.js
Kier2 小时前
ant-design下的表格自定义列控制以及拖拽排序
前端·javascript·ant design
白总Server3 小时前
Web 架构之 GraphQL 与 REST API 对比与选型
java·大数据·前端·javascript·后端·架构·graphql