基于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'
})
})
]
}
}
