安裝

npm install vue vue-server-renderer --save

構(gòu)建配置

服務(wù)端

• webpack配置

onst merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {
  // 將 entry 指向應(yīng)用程序的 server entry 文件
  entry: '/path/to/entry-server.js',

  // 這允許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態(tài)導(dǎo)入(dynamic import)，
  // 并且還會在編譯 Vue 組件時定页，
  // 告知 `vue-loader` 輸送面向服務(wù)器代碼(server-oriented code)。
  target: 'node',

  // 對 bundle renderer 提供 source map 支持
  devtool: 'source-map',

  // 此處告知 server bundle 使用 Node 風(fēng)格導(dǎo)出模塊(Node-style exports)
  output: {
    libraryTarget: 'commonjs2'
  },

  // 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$/
  }),

  // 這是將服務(wù)器的整個輸出
  // 構(gòu)建為單個 JSON 文件的插件警儒。
  // 默認(rèn)文件名為 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})

• server

const { createBundleRenderer } = require('vue-server-renderer')
//引入生成的vue-ssr-server-bundle.json文件
const serverBundle = require('/path/to/vue-ssr-server-bundle.json')
const clientManifest = require('/path/to/vue-ssr-client-manifest.json')

//自動注入
const renderer = createBundleRenderer(serverBundle , {
   template,
   clientManifest
})
server.get('*', (req, res) => {
  const context = { url: req.url }
  // 這里無需傳入一個應(yīng)用程序，因為在執(zhí)行 bundle 時已經(jīng)自動創(chuàng)建過眶根。
  // 現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦蜀铲！
  renderer.renderToString(context, (err, html) => {
    // 處理異常……
    res.end(html)
  })
})

//手動注入 可以使用任意模板 這里使用ejs
const renderer = createBundleRenderer(serverBundle , {
   inject:false,
   clientManifest
})
  const context = { url: req.url }
/*
下面context會暴露出renderStyles()属百、renderState(options?: Object)记劝、renderScripts()、
renderResourceHints()诸老、getPreloadFiles()這幾種方法
*/
const appString=await renderer.renderToString(context)
  const html=ejs.render(template,{
      appString,
      style:context.renderStyles(),
      scripts:context.renderScripts()
    })

客戶端

• webpack配置

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {
  entry: '/path/to/entry-client.js',
  plugins: [
    // 此插件在輸出目錄中
    // 生成 `vue-ssr-client-manifest.json`隆夯。
    new VueSSRClientPlugin()
  ]
})

源碼結(jié)構(gòu)

//app.js
import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)出一個工廠函數(shù)，用于創(chuàng)建新的
// 應(yīng)用程序别伏、router 和 store 實例
export function createApp () {
  const app = new Vue({
    // 根實例簡單的渲染應(yīng)用程序組件蹄衷。
    render: h => h(App)
  })
  return { app }
}

//entry-client.js
import { createApp } from './app'
// 客戶端特定引導(dǎo)邏輯……
const { app } = createApp()
// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')

//entry-server.js
import { createApp } from './app'

export default context => {
  const { app } = createApp()
  return app
}