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

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

相关推荐
ZC跨境爬虫5 分钟前
跟着 MDN 学CSS day_1:(CSS 基石与色彩的艺术)
前端·javascript·css·ui·html
计算机安禾24 分钟前
【c++面向对象编程】第35篇:构造函数与异常:如何避免资源泄露?
开发语言·javascript·c++·算法·性能优化
jiayong2335 分钟前
前端面试题库 - React框架篇
前端·javascript·react.js
ttwuai39 分钟前
XYGo Admin 国际化实战:Vue3 中后台多语言方案详解
前端·javascript·vue.js·vue
一颗小青松1 小时前
uniapp 集成友盟并且上传页面路径
前端·vue.js·uni-app
ZC跨境爬虫1 小时前
模块化烹饪小程序开发日记 Day4:网络层基础设施与接口治理实践
前端·javascript·数据库·ui·html
冴羽yayujs1 小时前
快速夯实 JavaScrilpt 基础的 33 个概念
前端·javascript·github·前端开发
Maimai108081 小时前
React 项目目录结构怎么设计:从基础分层到真实业务落地
前端·javascript·react.js·microsoft·前端框架
开开心心就好1 小时前
带OCR识别的电子发票打印工具
运维·javascript·科技·游戏·青少年编程·ocr·powerpoint
小茴香3531 小时前
大文件分片上传(前后端实现Vue+node.js)
前端·vue.js·node.js