基于vue cli3.0 搭建的項目，通過prerender-spa-plugin 插件進行預(yù)編。
其中配置文件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/', // 對應(yīng)自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路徑，也可以與webpakc打包的一致。
          // 下面這句話非常重要?。。?          // 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。
          staticDir: path.join(__dirname, 'dist'),

          // 對應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
          routes: ['/', '/mall', '/home'],

          // 這個很重要，如果沒有配置這段，也不會進行預(yù)編譯
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
 
}

執(zhí)行build命名進行構(gòu)建時候，在window、mac環(huán)境下正常，唯獨centos7環(huán)境下就一直報異常。
開始時候報錯的異常關(guān)鍵信息

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

如此反復(fù)幾次，報的卻是依賴信息一直變化，最后錯誤信息一直定格為? 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.

根據(jù)錯誤日志提供的信息，打開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

另外找了好多的發(fā)子都沒有效果。

最后偶然在貼吧上看到有人評論說將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/', // 對應(yīng)自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路徑，也可以與webpakc打包的一致。
          // 下面這句話非常重要?。?！
          // 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。
          staticDir: path.join(__dirname, 'dist'),

          // 對應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
          routes: ['/', '/mall', '/home'],

          // 這個很重要，如果沒有配置這段，也不會進行預(yù)編譯
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            // headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    }
 
}