VUE cli3 预渲染

什么是预渲染

浏览器在访问VUE页面时，会访问到一个空白的页面，然后再加载js代码根据路由显示成对应的页面。

而预渲染则是在打包时将需要进行预渲染的页面直接打包成真实的页面，而不会影响其他未进行预渲染的页面。

这样做的好处就是，浏览器在访问时可以直接拿到已存在的 dom和css 并直接渲染，而js此时只需要请求接口回填数据就行了，避免了用户进入后产生白屏。

首先需要两个依赖

1. prerender-spa-plugin
2. vue-cli-plugin-prerender-spa

在vue.config.js中配置

    pluginOptions: { 
        prerenderSpa: { 
            registry: undefined, 
            renderRoutes: ['/a','/b'],  // 需要进行预渲染的页面
            useRenderEvent: true, 
            headless: true, 
            onlyProduction: true 
        } 
    }