vue中如何实现预渲染

SPA应用前端预渲染之VUE

SPA应用的缺点是第一次打开缓慢，再有就是SEO不友好，优化有两种方式，一种是前端预渲染，另一种是后端渲染ssr,今天我们只说前端预渲染。
前端预渲染必须在webpack的基础上来做，用到的插件是prerender-spa-plugin。
我们在创建vue项目的时候现在都是用vue-cli，这里我只举例3.0版本。

prerender-spa-plugin的使用

安装

cnpm install prerender-spa-plugin --save

vue-config.js中增加

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

在main.js中增加

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

路由设置

router.js 中设置mode: “history”

打包

运行npm run build，之后在dist文件夹下可以看到跟预渲染路由名字一样文件夹，里边有一个index.html的文件，这就是预渲染页面。

总结

在现实中，这种需求还是很多的，我现在做的项目领导对首页加载一直不满意，首页是一个登录页面，现在的做法我把登录页的内容直接写死到dom里了，当js文件加载好了之后再覆盖掉，这种方式也可以，我看掘金的首页就是这么干的。
我来说一下我理解的预渲染，比如想把about页面预渲染出来，打包之后发现有两个html文件，正常的首页index.html页和about文件夹下的index.html页，仔细观察about预渲染页面，引入的js，css文件是一样的，只是显示的dom内容已经写死在dom里了，当然，也可以把首页的html文件预渲染，其实也是静态化，这样SEO就可以抓到里边的内容。预渲染的页面刚访问的时候里边内容是写死的，当点击路由后又切回到vue自己的路由模式来加载页面，当然，我猜在vue的路由里边已经删除了预渲染页面的路由，访问这些页面的时候只能去服务器端去下载静态的预渲染页面了。