通過(guò)vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序的方法

更新時(shí)間：2018年09月13日 08:58:13 作者：lentoo

這篇文章主要介紹了通過(guò)vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序,以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

1、前沿

1.1、什么是SSR

SSR（服務(wù)端渲染）顧名思義就是將頁(yè)面在服務(wù)端渲染完成后在客戶端直接展示。

1.2、客戶端渲染與服務(wù)端渲染的區(qū)別傳統(tǒng)的SPA模式

即客戶端渲染的模式

Vue.js構(gòu)建的應(yīng)用程序，默認(rèn)情況下是有一個(gè)html模板頁(yè)，然后通過(guò)webpack打包生成一堆js、css等等資源文件。然后塞到index.html中
用戶輸入url訪問(wèn)頁(yè)面 -> 先得到一個(gè)html模板頁(yè) -> 然后通過(guò)異步請(qǐng)求服務(wù)端數(shù)據(jù) -> 得到服務(wù)端的數(shù)據(jù) -> 渲染成局部頁(yè)面 -> 用戶

SSR模式

即服務(wù)端渲染模式

用戶輸入url訪問(wèn)頁(yè)面 -> 服務(wù)端接收到請(qǐng)求 -> 將對(duì)應(yīng)請(qǐng)求的數(shù)據(jù)渲染完一個(gè)網(wǎng)頁(yè) -> 返回給用戶

1.3、為什么要使用SSR呢？

ssr的好處官網(wǎng)已經(jīng)給出，最有意思的兩個(gè)優(yōu)點(diǎn)如下：

更有好的SEO。由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面。
更快的內(nèi)容到達(dá)時(shí)間(time-to-content)

1.4、SSR原理

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

Client Bundle，給瀏覽器用。和純Vue前端項(xiàng)目Bundle類似
Server Bundle，供服務(wù)端SSR使用，一個(gè)json文件

不管你項(xiàng)目先前是什么樣子，是否是使用vue-cli生成的。都會(huì)有這個(gè)構(gòu)建改造過(guò)程。在構(gòu)建改造這里會(huì)用到 vue-server-renderer 庫(kù)，這里要注意的是 vue-server-renderer 版本要與Vue版本一樣。

2、開(kāi)始構(gòu)建基于vue-cli3 的SSR應(yīng)用程序

了解ssr原理后，來(lái)開(kāi)始step by step搭建一個(gè)自己的SSR應(yīng)用程序

安裝vue-cli3

全局安裝vue-cli腳手架

npm install @vue/cli -g --registry=https://registry.npm.taobao.org

創(chuàng)建一個(gè)vue項(xiàng)目

vue create ssr-example

會(huì)進(jìn)入到一個(gè)交互bash界面，按自己需要選擇

一步一步回車(chē)，根據(jù)自己需要選擇

運(yùn)行項(xiàng)目

npm run serve

看到這個(gè)提示，說(shuō)明成功了一半了，接下來(lái)進(jìn)行后一半的改造。

3、進(jìn)行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 在服務(wù)器中集成

在項(xiàng)目根目錄下新建一個(gè)server.js

安裝koa2

npm install koa koa-static --save --registry=https://registry.npm.taobao.org

在koa2集成ssr

// server.js
// 第 1 步：創(chuàng)建一個(gè) Vue 實(shí)例
const Vue = require("vue");

const Koa = require("koa");
const app = new Koa();
// 第 2 步：創(chuàng)建一個(gè) renderer
const renderer = require("vue-server-renderer").createRenderer();


// 第 3 步：添加一個(gè)中間件來(lái)處理所有請(qǐng)求
app.use(async (ctx, next) => {
 const vm = new Vue({
  data: {
   title: "ssr example",
   url: ctx.url
  },
  template: `<div>訪問(wèn)的 URL 是： {{ url }}</div>`
 });
 // 將 Vue 實(shí)例渲染為 HTML
 renderer.renderToString(vm, (err, html) => {
  if(err){
   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}`);
});

運(yùn)行server.js

node server.js

看到這個(gè)說(shuō)明一個(gè)簡(jiǎn)單的ssr構(gòu)建成功了。

不過(guò)到目前為止，我們并沒(méi)有將客戶端的.vue文件通過(guò)服務(wù)端進(jìn)行渲染，那么如何將前端的.vue文件與后端node進(jìn)行結(jié)合呢？

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

1、修改源碼結(jié)構(gòu)

在src目錄下新建兩個(gè)文件，一個(gè) entry-client.js 僅運(yùn)行于瀏覽器一個(gè) entry-server.js 僅運(yùn)行于服務(wù)器
修改main.js

main.js 是我們應(yīng)用程序的「通用 entry」。在純客戶端應(yīng)用程序中，我們將在此文件中創(chuàng)建根 Vue 實(shí)例，并直接掛載到 DOM。但是，對(duì)于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。app.js 簡(jiǎn)單地使用 export 導(dǎo)出一個(gè) createApp 函數(shù)：

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

// 導(dǎo)出一個(gè)工廠函數(shù)，用于創(chuàng)建新的
// 應(yīng)用程序、router 和 store 實(shí)例
export function createApp () {
 const router = createRouter();
 const app = new Vue({
  router,
  // 根實(shí)例簡(jiǎn)單的渲染應(yīng)用程序組件。
  render: h => h(App)
 })
 return { app }
}

修改entry-client.js

客戶端 entry 只需創(chuàng)建應(yīng)用程序，并且將其掛載到 DOM 中

import { createApp } from './app'

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

// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')

修改entry-server.js

服務(wù)器 entry 使用 default export 導(dǎo)出函數(shù)，并在每次渲染中重復(fù)調(diào)用此函數(shù)。

import { createApp } from "./main";

export default context => {
 // 因?yàn)橛锌赡軙?huì)是異步路由鉤子函數(shù)或組件，所以我們將返回一個(gè) Promise，
 // 以便服務(wù)器能夠等待所有的內(nèi)容在渲染前，
 // 就已經(jīng)準(zhǔn)備就緒。
 return new Promise((resolve, reject) => {
  const { app, router, store } = createApp();

  // 設(shè)置服務(wù)器端 router 的位置
  router.push(context.url);

  // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
  router.onReady(() => {
   const matchedComponents = router.getMatchedComponents();
   // 匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404
   if (!matchedComponents.length) {
    return reject({
     code: 404
    });
   }
   // Promise 應(yīng)該 resolve 應(yīng)用程序?qū)嵗?，以便它可以渲?
   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創(chuàng)建的vue項(xiàng)目，已經(jīng)沒(méi)有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何進(jìn)行webpack的配置呢？

在vue-cli官網(wǎng)上也說(shuō)明了如何使用。調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象，該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。

在項(xiàng)目根目錄下，新建一個(gè)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 = {
 configureWebpack: () => ({
  // 將 entry 指向應(yīng)用程序的 server / client 文件
  entry: `./src/entry-${target}.js`,
  // 對(duì) 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
  // 外置化應(yīng)用程序依賴模塊。可以使服務(wù)器構(gòu)建速度更快，
  // 并生成較小的 bundle 文件。
  externals: nodeExternals({
   // 不要外置化 webpack 需要處理的依賴模塊。
   // 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
   // 你還應(yīng)該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
   whitelist: [/\.css$/]
  }),
  optimization: {
   splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 2,
    maxAsyncRequests: 5,
    maxInitialRequests: 3
   }
  },
  plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
 }),
 chainWebpack: config => {
  config.module
   .rule("vue")
   .use("vue-loader")
   .tap(options => {
    merge(options, {
     optimizeSSR: false
    });
   });
 }
};

修改package，新增三個(gè)腳本來(lái)生成bundle.json

"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
"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",

執(zhí)行命令

npm run build:win

在dist目錄下會(huì)生成兩個(gè)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);
// 開(kāi)放dist目錄
app.use(koaStatic(resolve('./dist')))

// 第 2 步：獲得一個(gè)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 步：添加一個(gè)中間件來(lái)處理所有請(qǐng)求
app.use(async (ctx, next) => {
 const context = {
  title: "ssr test",
  url: ctx.url
 };
 // 將 context 數(shù)據(jù)渲染為 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 運(yùn)行server.js

node server.js

訪問(wèn)localhost:3000，可以看到頁(yè)面的數(shù)據(jù)都是又服務(wù)端渲染完成后返回的。到這一步已經(jīng)基本算完成了SSR的構(gòu)建了。

如果有問(wèn)題的話，可以把dist目錄下的index.html文件刪了。避免直接訪問(wèn)到了該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 };
}

再次運(yùn)行腳本構(gòu)建