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

然后再次打包测试，打包成功！