vue 预渲染 prerender-spa-plugin

Posted 苹苹淡淡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 预渲染 prerender-spa-plugin相关的知识,希望对你有一定的参考价值。

最近项目上线要做运营,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‘,
}
 
),
 
 

以上是关于vue 预渲染 prerender-spa-plugin的主要内容,如果未能解决你的问题,请参考以下文章

vue 项目预渲染(prerender-spa-plugin)

vue-cil 服务端预渲染 prerender-spa-plugin

Vue CLI 3 预渲染水疗插件

vue项目使用 prerender-spa-plugin 预渲染

如何使用 spa-prerender 插件在 VUE 中预渲染“*”(未找到)页面

预渲染 vue.js 2.0 组件(类似于 vue 1 中的 this.$compile)