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

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

相关推荐
刘一说3 分钟前
Vue3响应式原理重构:从Object.defineProperty到Proxy的革命性升级
javascript·vue.js·重构
一位搞嵌入式的 genius7 分钟前
深入理解 JavaScript 原型与继承:从基础到进阶
开发语言·前端·javascript
爱敲代码的憨仔10 分钟前
Elasticsearch入门
大数据·elasticsearch·搜索引擎
董世昌4118 分钟前
深度解析var、let、const的区别与最佳使用场景
开发语言·前端·javascript
C_心欲无痕20 分钟前
Next.js 平行路由:构建模块化动态布局
开发语言·前端·javascript
切糕师学AI25 分钟前
Vue 中的生命周期钩子
前端·javascript·vue.js
摘星编程27 分钟前
React Native for OpenHarmony 实战:Platform 平台检测与判断
javascript·react native·react.js
暴富暴富暴富啦啦啦30 分钟前
使用 v-html 仅渲染新数据的方法
前端·javascript·vue.js
摘星编程30 分钟前
React Native for OpenHarmony 实战:Slider 滑块组件使用指南
javascript·react native·react.js
G皮T33 分钟前
【Elasticsearch】审计日志(一):General settings
大数据·elasticsearch·搜索引擎·全文检索·kibana·审计·审计日志