前言

現(xiàn)在Vue的ssr方案唾戚，在我了解到的有如下幾種：

vue-server-renderer服務端渲染
prerender-spa-plugin客戶端的靜態(tài)頁面生成
Nuxt.js 一個vue的服務端渲染框架，容易上手。

本文主要參考vue官網的ssr文檔，研究學習逗爹，其中代碼比較碎片咽弦，所以自己整理出來并且運行成功。
vue ssr官網文檔

package.json

{
  "name": "ssr-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack --config ./build/webpack.server.conf.js",
    "client": "webpack --config ./build/webpack.client.conf.js"
  },
  "author": "lanfeng",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "express": "^4.16.3",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.17"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "vue-loader": "^11.1.4", // 這個地方有一個坑狐树，最新版本是15以上，剛開始用的時候生成的js好像有些問題鸿脓，以后再驗證怎么解決
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.6.0",
    "webpack-merge": "^4.1.4",
    "webpack-node-externals": "^1.7.2"
  }
}

項目結構

圖1

build&entry

在ssr指南中抑钟，主要是構建配置這一塊代碼有小部分缺失涯曲，所以在這里主要指出配置模塊詳細代碼

webpack.base.config.js

module.exports = {
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
    },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

webpack.server.conf.js

const 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')

const path = require('path');
const root= path.resolve(__dirname, '..');

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

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

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

  // 此處告知 server bundle 使用 Node 風格導出模塊(Node-style exports)
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(root, 'dist'),
    filename: 'bundle.server.js'
  },

  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化應用程序依賴模塊』桌＃可以使服務器構建速度更快绰沥，
  // 并生成較小的 bundle 文件。
  externals: nodeExternals({
    // 不要外置化 webpack 需要處理的依賴模塊贺待。
    // 你可以在這里添加更多的文件類型徽曲。例如，未處理 *.vue 原始文件麸塞，
    // 你還應該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
    whitelist: /\.css$/
  }),

  // 這是將服務器的整個輸出
  // 構建為單個 JSON 文件的插件秃臣。
  // 默認文件名為 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})

webpack.client.conf.js

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

const path = require('path');
const root= path.resolve(__dirname, '..');
module.exports = merge(baseConfig, {
  entry: path.join(root, 'entry/entry-client.js'),
  output: {
    path: path.join(root, 'dist'),
    filename: 'bundle.client.js'
  },
  plugins: [
    // 重要信息：這將 webpack 運行時分離到一個引導 chunk 中，
    // 以便可以在之后正確注入異步 chunk哪工。
    // 這也為你的 應用程序/vendor 代碼提供了更好的緩存奥此。
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      filename: 'manifest.js',
      minChunks: Infinity
    }),
    // 此插件在輸出目錄中
    // 生成 `vue-ssr-client-manifest.json`。
    new VueSSRClientPlugin()
  ]
})

entry-server.js

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

export default context => {
  return new Promise((resolve, reject) => {
    const {app, router} = createApp()
    // 更改路由
    router.push(context.url)
    // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
    router.onReady(() => {
      const matchedComponents = app.$router.getMatchedComponents()
      // 匹配不到的路由雁比，執(zhí)行 reject 函數(shù)稚虎，并返回 404
      if (!matchedComponents.length) { return reject({code: 404}) }
      // Promise 應該 resolve 應用程序實例，以便它可以渲染
      resolve(app)
    }, reject)
  })

}

entry-client.js

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

基本上配置就是這樣子了章贞。其他就可以參考官方的代碼例子祥绞。構建這塊就沒有問題，最后就是server.js

server.js

/* server.js */
const path = require('path')
const express = require('express')
const app = express()
const { createBundleRenderer } = require('vue-server-renderer')

// 創(chuàng)建renderer
const template = require('fs').readFileSync('./index.ssr.html', 'utf-8')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json') // 這個可以動態(tài)將生成的js文件渲染到html模版中
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推薦
  template: template,
  clientManifest: clientManifest
})

app.use(express.static(path.join(__dirname, 'dist')))
// 響應路由請求
app.get('*', (req, res) => {
  const context = { url: req.url }
  // 創(chuàng)建vue實例鸭限，傳入請求路由信息
  renderer.renderToString(context, (err, html) => {
    if (err) {
      return res.state(500).end('運行時錯誤')
    }
    res.send(html)
  })
})

// 服務器監(jiān)聽地址
app.listen(8099, () => {
  console.log('服務器已啟動蜕径！')
})

總結

基本上到這個地方關鍵性構建以及服務模塊代碼補充完成。一個簡單的基于vue-server-renderer例子就可以運行起來败京。

Vue ssr vue-server-renderer 學習