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')

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

相关推荐
-凌凌漆-8 分钟前
【vue】pinia中的值使用 v-model绑定出现[object Object]
javascript·vue.js·ecmascript
Dxy12393102161 小时前
Elasticsearch 索引与映射:为你的数据打造一个“智能仓库”
大数据·elasticsearch·搜索引擎
大橙子额2 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
WooaiJava4 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
LYFlied4 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
Never_Satisfied4 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌414 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
B站_计算机毕业设计之家4 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
WeiXiao_Hyy5 小时前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
chian-ocean5 小时前
百万级图文检索实战:`ops-transformer` + 向量数据库构建语义搜索引擎
数据库·搜索引擎·transformer