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

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

相关推荐
林希_Rachel_傻希希2 分钟前
手写Promise最终版本
前端·javascript·面试
该用户已不存在6 分钟前
Node.js后端开发必不可少的7个核心库
javascript·后端·node.js
褪色的笔记簿8 分钟前
在 Vue 项目里管理弹窗组件:用 ref 还是用 props?
前端·vue.js
一只小阿乐22 分钟前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
AAA阿giao27 分钟前
从“操纵绳子“到“指挥木偶“:Vue3 Composition API 如何彻底改变前端开发范式
开发语言·前端·javascript·vue.js·前端框架·vue3·compositionapi
专注前端30年36 分钟前
在日常开发项目中Vue与React应该如何选择?
前端·vue.js·react.js
进击的野人1 小时前
Vue 组件与原型链:VueComponent 与 Vue 的关系解析
前端·vue.js·面试
馬致远1 小时前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭1 小时前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
zfj3211 小时前
vscode是js开发的,为什么能支持golang java等各种语言开发
javascript·vscode·golang