最近项目上线要做运营，vue单页面做运营很不友好
一开始用的这个配置
const PrerenderSPAPlugin = require(‘prerender-spa-plugin‘)
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// vue-cli生成的配置中就已有这个了，不要动
new HtmlWebpackPlugin({
filename: config.build.index,
template: ‘index.html‘,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: ‘dependency‘
}),
// 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, ‘../dist‘),
// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: [‘/‘, ‘/index‘, ‘/skin‘, ‘/slimming‘, ‘/exercise‘, ‘/alPay‘, ‘/wxPay‘],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: ‘bar‘
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event(‘render-event‘))，两者的事件名称要对应上。
renderAfterDocumentEvent: ‘render-event‘
})
})
]
})
本地打包成功一半一半，线上jenkins打包总是报一个chromium下载失败
Failed to download Chromium
这个错误网上不少解决方案，都试了，没有最终解决问题 改了配置
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, ‘../dist‘),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: [‘/‘],
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了
renderAfterTime: 5000
}),
这个配置也有问题，本地打包完全成功，jenkins打一个路由成功概率是一半一半，打两到三个路由失败概率大大提高，有的时候十一次成功一次，太夸张
最终的解决方案是
"prerender-spa-plugin": "^2.1.0", prerender-spa-plugin降版本，从3版本降到了2版本，然后如下配置，jenkins打包也成功了
new PrerenderSPAPlugin(
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
//staticDir:
path.join(__dirname, ‘../dist‘),
// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
// routes: [‘/‘, ‘/promotions/noised-optimized-rower-machine_32.html‘, ‘/product-detail/noised-optimized-rower-machine_16392658.html‘],
[‘/‘, ‘/promotions/noised-optimized-rower-machine_32.html‘],
// 这个很重要，如果没有配置这段，也不会进行预编译
/* renderer: new Renderer({
//routes:
[‘/‘,‘/promotions/noised-optimized-rower-machine_32.html‘/* ,‘/product-detail/noised-optimized-rower-machine_16392658.html‘ */
// routes: [‘/‘],
{
renderAfterTime: 5000,
//在一定时间后再捕获页面信息，使得页面数据信息加载完成
captureAfterTime: 50000,
//忽略打包错误
ignoreJSErrors: true,
phantomOptions: ‘--web-security=false‘,
maxAttempts: 10,
renderAfterDocumentEvent: ‘render-event‘,
}
),
原文地址：https://www.cnblogs.com/pingpingdejia/p/11412250.html