prerender-spa-plugin

背景：

vue2、yarn或npm

yarn镜像源:registry https://registry.npmmirror.com/

prerender-spa-plugin 安装版本 3.4.0

开发遇到的问题汇总

安装依赖报错

• [prerender-spa-plugin] Unable to prerender all routes!

问题排查 ：在 node_modules\prerender-spa-plugin\es6\index.js 该文件下找到输出报错日志，补充完整错误日志。

于是有了下面的报错

[prerender-spa-plugin] Unable to prerender all routes!TypeError: compilerFS.mkdirp is not a function

问题修改：重点是”compilerFS.mkdirp“，发现是webpack4/5兼容的问题。于是有了下面的兼容修改。 在 node_modules\prerender-spa-plugin\es6\index.js 对 mkdirpp 进行兼容性修改

到这里正常应该是没问题了，但控制台还是继续报错，找不到文件模块。

我的vue.config.js是这样写的，关键点在于routes里面有多层

    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      //需要预染的页面路由
      routes: [
        '/centerMain/home',
        '/consumer/about',
      ],
      renderer: new Renderer({
        renderAfterDocumentEvent: 'render-event',
      })
    })

解决方案：修改node_modules\prerender-spa-plugin\es6\index.js 对 mkdirpp 继续修改

  // From https://github.com/ahmadnassri/mkdirp-promise/blob/master/lib/index.js
  const mkdirp = function (dir, opts) {
    return new Promise((resolve, reject) => {
      console.log('\ndir', dir, opts, '\n');
      try {
      //设置 recursive: true
        compilerFS.mkdirp(dir, {...opts, recursive: true}, (err, made) => err === null ? resolve(made) : reject(err))
      } catch(e) {
        compilerFS.mkdir(dir, {...opts, recursive: true}, (err, made) => err === null ? resolve(made) : reject(err))
      }
    })
  }

到此解决vue开发 seo优化问题！！！做一个记录！