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

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

相关推荐
小小爱大王30 分钟前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往30 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
还是大剑师兰特37 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle38 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
用户479492835691539 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头40 分钟前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化
披萨心肠43 分钟前
理解JavaScript中的函数参数传递
前端·javascript
一点七加一1 小时前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
Fantastic_sj1 小时前
JavaScript 数组方法和属性详解
javascript
JA+2 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js