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

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

相关推荐
加勒比海涛12 分钟前
ElementUI 布局——行与列的灵活运用
前端·javascript·elementui
你不讲 wood16 分钟前
postcss 插件实现移动端适配
开发语言·前端·javascript·css·vue.js·ui·postcss
前端小程42 分钟前
使用vant UI实现时间段选择
前端·javascript·vue.js·ui
whyfail1 小时前
React 事件系统解析
前端·javascript·react.js
禾苗种树1 小时前
element form rules 验证数组对象属性时如何写判断规则
javascript·vue.js·elementui
liangshanbo12151 小时前
JavaScript 中的一些常见陷阱
开发语言·javascript·ecmascript
Bulut09071 小时前
Vue的slot插槽(默认插槽、具名插槽、作用域插槽)
vue.js·具名插槽·slot插槽·默认插槽·作用域插槽
小tenten2 小时前
js延迟for内部循环方法
开发语言·前端·javascript
程序员大金2 小时前
基于SpringBoot+Vue+MySQL的垃圾分类回收管理系统
java·vue.js·spring boot·后端·mysql·mybatis
我的运维人生2 小时前
JavaScript在网页设计中的应用案例
开发语言·javascript·ecmascript·运维开发·技术共享