vue 预渲染 prerender-spa-plugin

柔光的暖阳◎ 2023-06-03 15:59 16阅读 0赞

最近项目上线要做运营，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

\}),