vue 服務端渲染 vs 預渲染（1）

服務端渲染：

1、將完整的html輸出到客戶端

2、要使用通用代碼

優點 ：

 1、首次渲染快（無需等所有的js都完成下載）

  2、利於seo

缺點：

 

 1、更多的服務器負載

2、開發受限

3、需要處於node.js/php server 運行環境

 

 

 

預渲染：

 1、使用少數營銷頁的seo

  2、生成對特定路由靜態的html文件

優點：

  1、預渲染更簡單

  2、將前端作為一個完全靜態的站點

缺點

  1、若網站有成百上千條路線，預編譯會非常緩慢

 

預渲染核心：prerender-spa-plugin
安裝：   cnpm install prerender-spa-plugin --save-dev

 

步驟

創建項目

vue create 001_prerender_spa

 

安裝 prerender-spa-plugin

npm install prerender-spa-plugin --save-dev

 

配置 vue.config.js

在文件的根目錄創建vue.config.js文件   

官網上查看如何配置

https://www.npmjs.com/package/prerender-spa-plugin

// const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
  /** 區分打包環境與開發環境
   * process.env.NODE_ENV==='production'  (打包環境)
   * process.env.NODE_ENV==='development' (開發環境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
   */
  // 項目部署的基礎路徑
  // 我們默認假設你的應用將會部署在域名的根部,
  // 例如 https://www.my-app.com/
  // 如果你的應用部署在一個子路徑下，那么你需要在這里
  // 指定子路徑。比如將你的應用部署在
  // https://www.foobar.com/my-app/
  // 那么將這個值改為 '/my-app/ 
  // baseUrl: "/", // 構建好的文件輸出到哪里
  outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存時使用‘eslint-loader’進行檢查 // 有效值: true | false | 'error' // 當設置為‘error’時，檢查出的錯誤會觸發編譯失敗
  lintOnSave: true, // 使用帶有瀏覽器內編譯器的完整構建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false, // babel-loader默認會跳過`node_modules`依賴. // 通過這個選項可以顯示轉譯一個依賴
  transpileDependencies: [    /* string or regex */
  ], // 是否為生產環境構建生成sourceMap?
  productionSourceMap: false, // 調整內部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  devServer: {
    port: 8081,
    proxy: {
      '/apis': {
        target: 'http://101.132.34.30/',
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
    }
  },

  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路徑，也可以與webpakc打包的一致。
          // 下面這句話非常重要！！！
          // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
          staticDir: path.join(__dirname, 'dist'),
          // 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
          routes: ['/', '/About', 'Text'],
          // 這個很重要，如果沒有配置這段，也不會進行預編譯
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
            renderAfterDocumentEvent: 'render-event'
          })
        }),
      ],
    };
  }


}

main.js配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

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

 

打包完成后靜態文件就會在dist文件夾中