通過vue-cli3構建一個SSR應用程式

lentoo發表於2019-03-04

Vue

1、前沿

1.1、什麼是SSR

SSR（服務端渲染）顧名思義就是將頁面在服務端渲染完成後在客戶端直接展示。

1.2、客戶端渲染與服務端渲染的區別

傳統的SPA模式

即客戶端渲染的模式

Vue.js構建的應用程式，預設情況下是有一個html模板頁，然後通過webpack打包生成一堆js、css等等資原始檔。然後塞到index.html中
使用者輸入url訪問頁面 -> 先得到一個html模板頁 -> 然後通過非同步請求服務端資料 -> 得到服務端的資料 -> 渲染成區域性頁面 -> 使用者

SSR模式

即服務端渲染模式

使用者輸入url訪問頁面 -> 服務端接收到請求 -> 將對應請求的資料渲染完一個網頁 -> 返回給使用者

1.3、為什麼要使用SSR呢？

ssr的好處官網已經給出，最有意思的兩個優點如下：

更有好的SEO。由於搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。
更快的內容到達時間(time-to-content)

1.4、SSR原理

這是vue.js官方的SSR原理介紹圖，從這張圖片，我們可以知道：我們需要通過Webpack打包生成兩份bundle檔案：

Client Bundle，給瀏覽器用。和純Vue前端專案Bundle類似
Server Bundle，供服務端SSR使用，一個json檔案

不管你專案先前是什麼樣子，是否是使用vue-cli生成的。都會有這個構建改造過程。在構建改造這裡會用到 vue-server-renderer 庫，這裡要注意的是 vue-server-renderer 版本要與Vue版本一樣。

2、開始構建基於vue-cli3 的SSR應用程式

瞭解ssr原理後，來開始step by step搭建一個自己的SSR應用程式

安裝vue-cli3

全域性安裝vue-cli腳手架

npm install @vue/cli -g --registry=https://registry.npm.taobao.org
複製程式碼

建立一個vue專案

vue create ssr-example 
複製程式碼

會進入到一個互動bash介面，按自己需要選擇

一步一步回車，根據自己需要選擇

執行專案

npm run serve
複製程式碼

看到這個提示，說明成功了一半了，接下來進行後一半的改造。

3、進行SSR改造

3.1 安裝需要的包

安裝 vue-server-renderer
安裝 lodash.merge
安裝 webpack-node-externals
安裝 cross-env

npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev
複製程式碼

3.2 在伺服器中整合

在專案根目錄下新建一個server.js
安裝koa2

npm install koa koa-static --save --registry=https://registry.npm.taobao.org
複製程式碼

在koa2整合ssr

// server.js
// 第 1 步：建立一個 Vue 例項
const Vue = require("vue");

const Koa = require("koa");
const app = new Koa();
// 第 2 步：建立一個 renderer
const renderer = require("vue-server-renderer").createRenderer();


// 第 3 步：新增一箇中介軟體來處理所有請求
app.use(async (ctx, next) => {
  const vm = new Vue({
    data: {
      title: "ssr example",
      url: ctx.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  });
  // 將 Vue 例項渲染為 HTML
  renderer.renderToString(vm, (err, html) => {
    if(err){
      ctx.res.status(500).end('Internal Server Error')
      return
    }
    ctx.body = html
  });
});

const port = 3000;
app.listen(port, function() {
  console.log(`server started at localhost:${port}`);
});
複製程式碼

執行server.js

node server.js
複製程式碼

看到這個說明一個簡單的ssr構建成功了。

不過到目前為止，我們並沒有將客戶端的.vue檔案通過服務端進行渲染，那麼如何將前端的.vue檔案與後端node進行結合呢？

3.3 改造前端配置，以支援SSR

1、修改原始碼結構

在src目錄下新建兩個檔案，一個entry-client.js 僅執行於瀏覽器一個entry-server.js 僅執行於伺服器
修改main.js

main.js 是我們應用程式的「通用 entry」。在純客戶端應用程式中，我們將在此檔案中建立根 Vue 例項，並直接掛載到 DOM。但是，對於伺服器端渲染(SSR)，責任轉移到純客戶端 entry 檔案。app.js 簡單地使用 export 匯出一個 createApp 函式：

// main.js
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from "./router";

// 匯出一個工廠函式，用於建立新的
// 應用程式、router 和 store 例項
export function createApp () {
  const router = createRouter();
  const app = new Vue({
    router,
    // 根例項簡單的渲染應用程式元件。
    render: h => h(App)
  })
  return { app,router }
}
複製程式碼

修改entry-client.js

客戶端 entry 只需建立應用程式，並且將其掛載到 DOM 中

import { createApp } from './main'

// 客戶端特定引導邏輯……
const { app } = createApp()

// 這裡假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
複製程式碼

修改entry-server.js

伺服器 entry 使用 default export 匯出函式，並在每次渲染中重複呼叫此函式。

import { createApp } from "./main";

export default context => {
  // 因為有可能會是非同步路由鉤子函式或元件，所以我們將返回一個 Promise，
  // 以便伺服器能夠等待所有的內容在渲染前，
  // 就已經準備就緒。
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    // 設定伺服器端 router 的位置
    router.push(context.url);

    // 等到 router 將可能的非同步元件和鉤子函式解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      // 匹配不到的路由，執行 reject 函式，並返回 404
      if (!matchedComponents.length) {
        return reject({
          code: 404
        });
      }
      // Promise 應該 resolve 應用程式例項，以便它可以渲染
      resolve(app);
    }, reject);
  });
};
複製程式碼

修改router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export function createRouter(){
  return new Router({
    mode: 'history', //一定要是history模式
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
      }
    ]
  })
}

複製程式碼

2、修改webpack配置

在vue-cli3建立的vue專案，已經沒有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那麼如何進行webpack的配置呢？

在vue-cli官網上也說明了如何使用。調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個物件，該物件將會被 webpack-merge 合併入最終的 webpack 配置。

在專案根目錄下，新建一個vue.config.js

// vue.config.js

const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";


module.exports = {
  css: {
    extract: false
  },
  configureWebpack: () => ({
    // 將 entry 指向應用程式的 server / client 檔案
    entry: `./src/entry-${target}.js`,
    // 對 bundle renderer 提供 source map 支援
    devtool: 'source-map',
    target: TARGET_NODE ? "node" : "web",
    node: TARGET_NODE ? undefined : false,
    output: {
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外接化應用程式依賴模組。可以使伺服器構建速度更快，
    // 並生成較小的 bundle 檔案。
    externals: TARGET_NODE
      ? nodeExternals({
          // 不要外接化 webpack 需要處理的依賴模組。
          // 你可以在這裡新增更多的檔案型別。例如，未處理 *.vue 原始檔案，
          // 你還應該將修改 `global`（例如 polyfill）的依賴模組列入白名單
          whitelist: [/\.css$/]
        })
      : undefined,
    optimization: {
          splitChunks: undefined
    },
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        });
      });
  }
};
複製程式碼

修改package，新增三個指令碼來生成bundle.json

"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
"build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
複製程式碼

執行命令

npm run build:win
複製程式碼

在dist目錄下會生成兩個json檔案

3.4 改造server.js 程式碼

const fs = require("fs");
const Koa = require("koa");
const path = require("path");
const koaStatic = require('koa-static')
const app = new Koa();

const resolve = file => path.resolve(__dirname, file);
// 開放dist目錄
app.use(koaStatic(resolve('./dist')))

// 第 2 步：獲得一個createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
const bundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");

const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: fs.readFileSync(resolve("./src/index.temp.html"), "utf-8"),
  clientManifest: clientManifest
});

function renderToString(context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html);
    });
  });
}
// 第 3 步：新增一箇中介軟體來處理所有請求
app.use(async (ctx, next) => {
  const context = {
    title: "ssr test",
    url: ctx.url
  };
  // 將 context 資料渲染為 HTML
  const html = await renderToString(context);
  ctx.body = html;
});

const port = 3000;
app.listen(port, function() {
  console.log(`server started at localhost:${port}`);
});
複製程式碼

3.5 執行server.js

node server.js
複製程式碼

訪問 localhost:3000，可以看到頁面的資料都是又服務端渲染完成後返回的。到這一步已經基本算完成了SSR的構建了。

如果有問題的話，可以把dist目錄下的index.html檔案刪了。避免直接訪問到了該html檔案。

4、整合vuex

修改store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore() {
  return new Vuex.Store({
    state: {

    },
    mutations: {

    },
    actions: {

    }
  });
}

複製程式碼

修改main.js

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "@/router";
import { createStore } from "@/store";
export function createApp() {
  const router = createRouter();
  const store = createStore()  // +
  const app = new Vue({
    router,
    store,      // +
    render: h => h(App)
  });
  return { app, router,store };
}
複製程式碼

再次執行指令碼構建

npm run build:win
node server.js
複製程式碼

5、案例程式碼

附上案例原始碼 github.com/lentoo/vue-… 歡迎star

6、總結

到目前為止，僅僅是完成了SSR的基礎部分，還有如何實現開發模式下熱更新的內容，具體可以檢視這篇文章：基於vue-cli3 SSR 程式實現熱更新功能

公眾號

歡迎關注我的公眾號“碼上開發”，每天分享最新技術資訊。關注獲取最新資源

Go通過cobra快速構建命令列應用
2022-04-19
Go命令列
通過構建Storage Explorer 應用學習
2011-02-28
如何通過 Vue-Cli3 - Vuex 完成一個 TodoList
2019-05-22
Vue
構建你的第一個Flutter視訊通話應用
2019-02-22
Flutter
如何構建一個WEB同構應用
2019-04-24
Web
構建一個Flowable命令列應用
2021-04-16
命令列
“Hello，Jetpack”：構建您的第一個Jetpack應用程式
2018-10-09
Jetpack
FISCO BCOS | 構建第一個區塊鏈應用程式
2023-10-12
區塊鏈
通過silky框架在.net平臺構建微服務應用
2021-11-03
框架微服務
使用 Docker 和 Elasticsearch 構建一個全文搜尋應用程式
2022-11-27
DockerElasticsearch
OpenAI Codex完全通過自然語言構建遊戲應用 – AndrewMayne
2022-03-27
OpenAI遊戲
快速入門：構建您的第一個 .NET Aspire 應用程式
2023-11-16
1. 構建您的第一個應用
2020-04-07
使用 Redis 和 Python 構建一個共享單車的應用程式
2018-11-14
RedisPython
Javascript 基礎夯實 —— 通過程式碼構建一個包含檔案的 FormData 物件
2017-12-10
JavaScriptORM物件
通過構建一個簡單的擲骰子游戲去學習怎麼用 Python 程式設計
2017-11-20
Python程式設計
構建一個即時訊息應用（二）：OAuth
2019-10-28
OAuth
JavaFX桌面應用-構建程式框架
2020-09-21
Java框架
基於vue-cli3 SSR 程式實現熱更新功能
2018-10-15
Vue
React Native 學習指南（一） - 構建第一個應用
2016-11-25
React Native
elementary OS 正在構建一個可以買應用的開源應用商店
2020-02-27
從零構建一個基於Docker的Laravel應用
2019-03-03
DockerLaravel
Electron構建一個檔案瀏覽器應用(二)
2019-06-30
瀏覽器
編寫多執行緒應用程式，模擬多個人通過一個山洞：
2017-09-18
執行緒
通過Sonar 初步構建程式碼持續審查
2017-02-16
如何構建一個沒有任何後端程式碼的全棧應用？- hashnode
2021-06-05
後端全棧
使用SlashDB，Go和Vue構建一個簡單的時間表應用程式
2017-02-21
GoVue
五、Spring Web應用程式構建
2020-05-29
SpringWeb
如何構建 Android MVVM 應用程式
2016-06-25
AndroidMVVM
使用SignalR構建聊天應用程式
2015-07-16
SignalR
構建應用程式的正確方法
2006-04-27
HelloWorld：通過demo，構建黑盒模型
2022-03-12
模型
全棧工程師如何快速構建一個Web應用
2019-04-03
全棧工程師Web
基於 MUI 構建一個具有 90 +頁面的APP應用
2018-09-27
UIAPP
構建 API 應用
2020-05-30
API
Atlas是一個為雲原生應用程式構建的開源部署管道平臺
2022-02-03
圍繞Vue 3 Composition API構建一個應用程式，包含一些最佳實踐！
2022-07-18
VueAPI
【譯文】構建大型 Redux 應用的五個建議
2019-03-02
Redux