Vue项目预渲染机制

时间 2019-12-09

标签 vue 项目渲染机制繁體版

原文原文链接

　　咱们知道SPA有不少优势，不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好，为了照顾这些引擎，目前主要有两个方案：服务端渲染(Server Side Rendering)、预渲染(Prerending)。css

　　若是你只须要改善少数页面（例如首页/, /about, /contact 等）的 SEO，那么你可能须要预渲染。无需使用 web 服务器实时动态编译 HTML (服务端渲染, SSR)，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。它主要使用 prerender-spa-plugin 插件，其与SSR同样均可以加快页面的加载速度，而且侵入性更小，在已上线的项目稍加改动也能够轻松引入预渲染机制，而SSR方案则须要将整个项目结构推翻。html

　　访问预渲染出来的页面在访问时与SSR同样快，而且它将服务端编译HTML的时机提早到了构建时，所以也下降了服务端的压力。不过SSR和预渲染的使用场景仍是有较明显的区别的。前端

　　预渲染的使用场景更可能是简单的静态页面，对于那些大量的动态路由匹配（好比大量的文章详情，大量的活动详情等）就不适合了。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站，好比电商网站。

一、安装vue

　　安装跟其余库同样：npm install prerender-spa-plugin --save-devlinux

二、前端配置webpack

（1）router/index.js的配置，预渲染要求是histroy模式，有的文章说不须要history模式，这是错的，不然生成的页面都是同一个html。nginx

　　另外注意加上base，不然若是你但愿跳转到二级页面的localhost/base/home时候，在页面中点击<router-link to="/home">home</router-link>的时候会跳转localhost/homegit

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: '/base/', routes: [...] })

（2）而后是config，这里注意assetsPublicPath不是./,github

// config/index.js
const path = require("path") module.exports = { build: { index: path.resolve(__dirname, "../base/index.html"), assetsRoot: path.resolve(__dirname, ".."), assetsSubDirectory: "base/static", assetsPublicPath: "/", } }

（3）而后是插件的配置，是放在prod中的，由于只有build的时候会用web

// build/webpack.prod.conf.js

const path = require('path') const config = require('../config') const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackConfig, { new PrerenderSPAPlugin({ staticDir: config.build.assetsRoot, outputDir: path.join(config.build.assetsRoot, 'base'), indexPath: config.build.index, // 对应路由文件的path
 routes: [ '/', '/BigData', '/CompanyHonor' ], renderer: new Renderer({ headless: false,            // 无桌面系统去掉
     renderAfterDocumentEvent: 'render-event' }) }) })

　　注意了，若是你的项目是部署在linux/centOS之类没有桌面的系统，须要把headless: false去掉，若是centOS报没有找到lib的错，请参考 issue-200 的解决办法。

　　另外注意上面一个renderAfterDocumentEvent: 'render-event'了么，这个意思是在render-event事件触发以后执行prerender，这个事件咱们在main.js中mounted钩子触发

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

　　这时候执行npm run build就能够生成刚刚配置在PrerenderSPAPlugin插件中routes中的页面html了，这过程当中会一闪而过的短暂打开chromium浏览器，不用管。最后生成的目录树：

│ index.html ├─BigData │ index.html ├─CompanyHonor │ index.html └─static ├─css ├─fonts ├─img └─js

　　最后若是但愿进一步优化生成出来页面的SEO，能够配合 vue-meta 使用，动态设置title、keywords等。

　　参考：