前言
今天在做我的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')
然后再次打包测试,打包成功!