webpack5, vue3,vue-cli5 使用 prerender-spa-plugin 预渲染

环境： webpack5, vue3,vue-cli5
插件： prerender-spa-plugin
报错： [prerender-spa-plugin] Unable to prerender all routes!

  某天，我在愉快地学(摸)习(鱼)，突然又双叒叕被抓去铲屎(T_T)，要把之前做的一个东西加入SEO。

  然鹅，这个是静态项目，没有跑在node上，也就（没）用（时）不（间）了（改）ssr
行叭， Prerender 走一个~

  然后我就收到报错大礼包一份。

  吓得我立马跑去检查配置文件，并自我怀疑：作为一只 CV 攻城狮 ，配置文件这玩意通常都是老项目拉过来的，除了开荒的时候改过，后面基本都不会再动它，应该没什么问题把
然后发现配置好像确实没什么问题，场面一度十分尴尬。

  好吧，人肉 debug 开始！我熟练地点进 prerender-spa-plugin 里( 熟练到让人心疼 )
一顿搜索 Unable to prerender all routes 出来两个文件调用，分别是 ES5 、 ES6 的规范，到 indexjs 瞄一眼，就能发现 Nodejs 版本在 80 以上使用 ES6 版。

  戳进去发现，抛出的并不是原始错误，原始错误已经被吃掉了(这)。

  打个断点，发现是函数 compilerFSmkdirp 调用出错。

  一键飞过去看看调用的地方，发现 compilerFS 其实就是 compileroutputFileSystem ，里面确实是没有这个方法，熟悉 Nodejs 和 webpakc 的大佬们这时候脸上应该已经露出了和煦的微笑。

  作者很贴心的给了个 mkdirp-promise 的链接，戳进去就能看见这么一句话：

   mkdirp-promise 已经停更3年，并且作者近期发话已经弃用，也用不了了。如果你使用的是最新的 Nodejs 那么直接用 fsmkdir 就行了。
现在，把 node_modules\prerender-spa-plugin\es6\indexjs 第 60 行 compilerFSmkdirp 函数改成 compilerFSmkdir 。

再来一次~

完结撒花~~~

   compileroutputFileSystem 其实就是 Nodejs 的输出文件系统，调用的是 Nodejs 的 fs 模块，
fsmkdir 这包是给早期 Nodejs 递归创建文件夹,并且返回 Promise 用的，现在的 Nodejs 早已经支持递归，并且可以返回Promise。所以这个包已经不需要了，直接用 fsmkdir 就行了。

三点几了！饮茶先啦~~
prerender-spa-plugin-next 的配置先咕了,下次再讲 本萌新先去饮茶啦~

2021517,补充 prerender-spa-plugin-next 配置

v-text是用于 *** 作纯文本，它会替代显示对应的数据对象上的值。此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

{{}}是v-text的简写形式，注意当laravel中的balde模板引擎无法识别{{}}时，可用v-text

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

原文： >