Vue-cli使用prerender-spa-plugin插件预渲染

最新推荐文章于 2020-03-27 12:55:51 发布

小王先森

最新推荐文章于 2020-03-27 12:55:51 发布

阅读量141

点赞数

本文链接：https://blog.youkuaiyun.com/qq_29881259/article/details/90906396

版权

vue-cli2.0版本
1.安装

 cnpm install prerender-spa-plugin --save

2.webpack.prod.conf.js增加部分代码

const path = require('path')
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'
        }),
        // 配置PrerenderSPAPlugin
        new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            staticDir: path.join(__dirname, '../dist'),
            
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/', '/product','/about','/contact','/join','/jzjh'],
           
            // 这个很重要，如果没有配置这段，也不会进行预编译
            renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
            })
        })
    ]
})

3.在main.js中增加

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

4.router.js 中设置mode: “history”

5.运行npm run build，