[Prerenderer - PuppeteerRenderer

基于vue cli3.0 搭建的项目，通过prerender-spa-plugin 插件进行预编。
其中配置文件vue.config.js 配置如下：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
  // 配置文件，可以手动配置访问的端口、地址
  devServer: {
    // port: 8085, // 端口号
    // host: '127.0.0.1',
    // https: false // https:{type:Boolean}
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://192.168.3.62:9095/', // 对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),

          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/mall', '/home'],

          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
 
}

执行build命名进行构建时候，在window、mac环境下正常，唯独centos7环境下就一直报异常。
开始时候报错的异常关键信息

This issue will occur if you are missing the libXss.so.1 library, which is part of the libXScrnSaver package. To resolve this issue, run the command:

sudo yum install libXScrnSaver

按照提示将却是的依赖libXss.so.1安装，

sudo yum install libXss.so.1

如此反复几次，报的却是依赖信息一直变化，最后错误信息一直定格为⠋ Building for production...Error: Failed to launch chrome!

(chrome:27380): Gtk-WARNING **: 01:05:24.595: cannot open display:

[isuwang@sandbox3 ipolymer-web]$ npm run build

> ipolymer-web@0.1.0 build /opt/workSpace/ipolymer-web
> vue-cli-service build


⠋  Building for production...Error: Failed to launch chrome!

(chrome:27380): Gtk-WARNING **: 01:05:24.595: cannot open display:


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/opt/workSpace/ipolymer-web/node_modules/puppeteer/lib/Launcher.js:342:14)
    at ChildProcess.helper.addEventListener (/opt/workSpace/ipolymer-web/node_modules/puppeteer/lib/Launcher.js:332:60)
    at ChildProcess.emit (events.js:187:15)
    at ChildProcess.EventEmitter.emit (domain.js:441:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
[Prerenderer - PuppeteerRenderer] Unable to start Puppeteer
(node:27345) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'close' of null
    at PuppeteerRenderer.destroy (/opt/workSpace/ipolymer-web/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:140:21)
    at Prerenderer.destroy (/opt/workSpace/ipolymer-web/node_modules/@prerenderer/prerenderer/es6/index.js:87:20)
    at PrerendererInstance.initialize.then.then.then.then.then.then.then.then.catch.err (/opt/workSpace/ipolymer-web/node_modules/prerender-spa-plugin/es6/index.js:144:29)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:27345) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:27345) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

根据错误日志提供的信息，打开https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md 文档，安装其中的要求将需要的依赖全部install了还是不行。安装依赖：

sudo yum install libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

另外找了好多的发子都没有效果。

最后偶然在贴吧上看到有人评论说将headless: false语句注释掉就可以了，试了一下，果然ok。这个坑有点儿大呀。浪费了好多的时间
修改后的配置文件如下

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
  // 配置文件，可以手动配置访问的端口、地址
  devServer: {
    // port: 8085, // 端口号
    // host: '127.0.0.1',
    // https: false // https:{type:Boolean}
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://192.168.3.62:9095/', // 对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),

          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/mall', '/home'],

          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            // headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
 
}