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等。

　　參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。