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

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

相关推荐
__sgf__4 分钟前
ES11(ES2020)新特性
前端·javascript
__sgf__19 分钟前
ES8(ES2017)新特性
前端·javascript
__sgf__21 分钟前
ES9(ES2018)新特性
前端·javascript
送鱼的老默27 分钟前
学习笔记--vue3 watchEffect监听的各种姿势用法和总结
前端·vue.js
你挚爱的强哥27 分钟前
解决:动态文本和背景色一致导致文字看不清楚,用js获取背景图片主色调,并获取对比度最大的hex色值给文字
前端·javascript·github
英俊潇洒美少年30 分钟前
js 同步异步,宏任务微任务的关系
开发语言·javascript·ecmascript
angerdream39 分钟前
最新版vue3+TypeScript开发入门到实战教程之路由详解
前端·javascript·vue.js
送鱼的老默44 分钟前
学习笔记--vue3 watch监听的各种姿势用法和总结
前端·vue.js
小贺要学前端2 小时前
ES6 还没用明白,JavaScript 已经快到 ES2026 了
前端·javascript·es6
Amumu121382 小时前
JS:ES6~ES11基础语法(二)
开发语言·前端·javascript