看了vue 官方的文件，還是有點懵的。百度了一堆東西，終於成功的配置出基於vue-cli3的vue-ssr 服務端預渲染。 有幫助的話，還請點個贊 建議使用nuxt，可以更好的做服務端渲染。
需要自己建立index。template。html檔案。這個檔案在
文章轉載：樂位元組
一、建立vue專案
$ vue create vue-ssr 建立目錄名為vue-ssr的專案
選擇專案需要的選項，直接建立即可。
$ cd vue-ssr 建立完成後，進入專案目錄。
二、改造vue-ssr
1、安裝環境
$ npm install vue-server-renderer lodash。merge webpack-node-externals cross-env express ——registry=https：//registry。npm。taobao。org ——save-dev
2、建立ssr配置檔案
在根目錄新建 server。js 檔案，用於整合node服務
// server。jsconst express = require（‘express’）const fs = require（‘fs’）const { minify } = require（‘html-minifier’）const path = require（‘path’） const { createBundleRenderer } = require（‘vue-server-renderer’）const app = express（） const resolve = file => path。resolve（__dirname， file） const renderer = createBundleRenderer（require（‘。/dist/vue-ssr-server-bundle。json’）， { runInNewContext： false， template： fs。readFileSync（resolve（‘。/index。template。html’）， ‘utf-8’）， clientManifest： require（‘。/dist/vue-ssr-client-manifest。json’）， basedir： resolve（‘。/dist’）}）app。use（express。static（path。join（__dirname， ‘dist’）））app。get（‘*’， （req， res） => { res。setHeader（‘Content-Type’， ‘text/html’） const handleError = err => { if （err。url） { res。redirect（err。url） } else if （err。code === 404） { res。status（404）。send（‘404 | Page Not Found’） } else { res。status（500）。send（‘500 | Internal Server Error’） console。error（`error during render ： ${req。url}`） console。error（err。stack） } } const context = { title： ‘document’， url： req。url， keywords： ‘’， description： ‘’， } renderer。renderToString（context， （err， html） => { if （err） { return handleError（err） } res。send（minify（html， { collapseWhitespace： true， minifyCSS： true }）） }）}）app。on（‘error’， err => console。log（err））app。listen（8000， （） => { console。log（`vue ssr started at http：//localhost：8000`）}）
在src目錄下新建以下兩個檔案 /src/entry-client。js /src/entry-server。js
1、entry-client。js
// entry-client。jsimport { createApp } from ‘。/main’// 客戶端特定引導邏輯……const { app } = createApp（）// 這裡假定 App。vue 模板中根元素具有 `id=“app”`app。$mount（‘#app’）
2、entry-server。js
// entry-server。jsimport { 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）； }）；}；
在根目錄下新建webpack配置檔案，vue-cli3+對webpack的配置，已經轉移到根目錄下的vue。config。js檔案內。
所以需要在根目錄下新建一個 vue。config。js檔案。
// vue。config。jsconst 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： false // 這裡設定為false，不然會一直build 不成功 }， plugins： ［TARGET_NODE ？ new VueSSRServerPlugin（） ： new VueSSRClientPlugin（）］ }）， chainWebpack： config => { config。module 。rule（“vue”） 。use（“vue-loader”） 。tap（options => { merge（options， { optimizeSSR： false }）； }）； }}；
修改package。json檔案，在scripts屬性中新增以下程式碼：
“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”
修改main。js、router/index。js、store/index。js檔案
1、main。js
// main。jsimport Vue from “vue”；import App from “。/App。vue”；import { createRouter } from “。/router”；import { createStore } from “。/store”；Vue。config。productionTip = false； export function createApp（） { const router = createRouter（）； const store = createStore（）； const app = new Vue（{ router， store， render： h => h（App） }） return { app， router， store }}
2、router/index。js
// router/index。jsimport Vue from “vue”；import VueRouter from “vue-router”；import Home from “。。/views/Home。vue”；Vue。use（VueRouter）；const routes = ［ { path： “/”， name： “Home”， component： Home }，］；export function createRouter（） { return new VueRouter（{ mode： “history”， base： process。env。BASE_URL， routes }）；}
3、store/index。js
// store/index。jsimport Vue from “vue”；import Vuex from “vuex”；Vue。use（Vuex）；export function createStore（） { return new Vuex。Store（{ state： {}， mutations： {}， actions： {}， modules： {} }）}
最後一步，執行命令：
$ npm run build：win
構建完成後執行命令：
$ node server
然後到瀏覽器開啟 http：//localhost：8000 如果出現了頁面內容，則證明配置成功！
文章轉載：樂位元組
