vue 预渲染 prerender-spa-plugin

标签：int   err   dispatch   nts   dir   mode   重要   rtm   ons   

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

这个错误网上不少解决方案，都试了，没有最终解决问题

改了配置

vue 预渲染 prerender-spa-plugin

标签：int   err   dispatch   nts   dir   mode   重要   rtm   ons   

原文地址：https://www.cnblogs.com/pingpingdejia/p/11412250.html