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

Posted 2023-04-25

参考技术A

环境： 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 的规范，到 index.js 瞄一眼，就能发现 Node.js 版本在 8.0 以上使用 ES6 版。

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

  打个断点，发现是函数 compilerFS.mkdirp 调用出错。

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

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

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

再来一次~

完结撒花~~~

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

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

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

如何通过 vue-cli 3 配置 webpack 以使用 sass

【中文标题】如何通过 vue-cli 3 配置 webpack 以使用 sass

【英文标题】：How to configure webpack via vue-cli 3 to use sass

【发布时间】：2019-05-13 10:33:15

【问题描述】：

我正在使用 vue-cli 3 构建一个 vue 应用程序。我想在我的 webpack 构建中包含 sass 文件，但 vue-cli 抽象了 webpack.config.js 文件。相反，我们将创建一个vue.config.js 文件并使用一组指令对其进行配置。

如果我正在配置webpack.config.js，以下内容将起作用：

module.exports = 
  module: 
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      
    ]
  ,
  // plugin omitted

我应该如何配置我的vue.config.js 来达到同样的效果？这是我最好的尝试：

module.exports = 
    chainWebpack: config => 
        config.module
            .rule('scss')
            .test(/\.scss$/)
            .use('vue-style-loader')
            .loader('vue-style-loader')
            .use('css-loader')
            .loader('css-loader')
            .use('sass-loader')
            .loader('sass-loader')
            .end();
    
;

这会失败并显示消息

ERROR  TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function

【问题讨论】：

你检查了吗：***.com/questions/44019469/…，我们也有 sass，我们在 vue.config.js 中没有具体说明，你总是可以运行 vue inspect --mode production > production.config .js 来查看 vue-cli 在 npm run build 上使用的 webpack 配置，或者 vue inspect --mode development > development.config.js 来查看 vue-cli 在 npm run serve 上使用的 webpack 配置，如果你改变了那个 vue。配置文件，然后再次运行它们，您可以看到您的更改

【参考方案1】：

如果您使用的是 vue cli 3，那么只需在您的项目根目录中运行以下命令：

vue add style-resources-loader