正如Vue官方所說(shuō)，SSR配置適合已經(jīng)熟悉 Vue, webpack 和 Node.js 開發(fā)的開發(fā)者閱讀。請(qǐng)先移步ssr.vuejs.org 了解手工進(jìn)行SSR配置的基本內(nèi)容。

從頭搭建一個(gè)服務(wù)端渲染的應(yīng)用是相當(dāng)復(fù)雜的。如果您有SSR需求，對(duì)Webpack及Koa不是很熟悉，請(qǐng)直接使用NUXT.js。

本文所述內(nèi)容示例在 Vue SSR Koa2 腳手架 ： https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold

我們以撰寫本文時(shí)的最新版：Vue 2，Webpack 4，Koa 2為例。

特別說(shuō)明

此文描述的是API與WEB同在一個(gè)項(xiàng)目的情況下進(jìn)行的配置，且API、SSR Server、Static均使用了同一個(gè)Koa示例，目的是闡述配置方法，所有的報(bào)錯(cuò)顯示在一個(gè)終端，方便調(diào)試。

初始化項(xiàng)目

git inityarn inittouch .gitignore

在 .gitignore 文件，將常見的目錄放于其中。

.DS_Storenode_modules# 編譯后的文件以下兩個(gè)目錄/dist/web/dist/api# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.vscode*.suo*.ntvs**.njsproj*.sln*.sw*

根據(jù)經(jīng)驗(yàn)來(lái)預(yù)先添加肯定會(huì)用到的依賴項(xiàng)：

echo "yarn add cross-env # 跨平臺(tái)的環(huán)境變量設(shè)置工具 koa koa-body # 可選，推薦 koa-compress # 壓縮數(shù)據(jù) compressible # https://github.com/jshttp/compressible axios # 此項(xiàng)目作為API請(qǐng)求工具 es6-promise  vue vue-router # vue 路由 注意，SSR必選 vuex # 可選，但推薦使用，本文基于此做Vuex在SSR的優(yōu)化 vue-template-compiler vue-server-renderer # 關(guān)鍵 lru-cache # 配合上面一個(gè)插件緩存數(shù)據(jù) vuex-router-sync" | sed 's/#[[:space:]].*//g' | tr '/n' ' ' | sed 's/[ ][ ]*/ /g' | bashecho "yarn add -D webpack webpack-cli webpack-dev-middleware # 關(guān)鍵 webpack-hot-middleware # 關(guān)鍵 webpack-merge # 合并多個(gè)Webpack配置文件的配置 webpack-node-externals # 不打包node_modules里面的模塊 friendly-errors-webpack-plugin # 顯示友好的錯(cuò)誤提示插件 case-sensitive-paths-webpack-plugin # 無(wú)視路徑大小寫插件 copy-webpack-plugin # 用于拷貝文件的Webpack插件 mini-css-extract-plugin # CSS壓縮插件 chalk # console著色 @babel/core # 不解釋 babel-loader @babel/plugin-syntax-dynamic-import # 支持動(dòng)態(tài)import @babel/plugin-syntax-jsx # 兼容JSX寫法 babel-plugin-syntax-jsx # 不重復(fù)，必須的 babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props @babel/polyfill @babel/preset-env file-loader json-loader url-loader css-loader vue-loader vue-style-loader vue-html-loader" | sed 's/#[[:space:]].*//g' | tr '/n' ' ' | sed 's/[ ][ ]*/ /g' | bash

現(xiàn)在的npm模塊命名越來(lái)越語(yǔ)義化，基本上都是見名知意。關(guān)于Eslint以及Stylus、Less等CSS預(yù)處理模塊我沒(méi)有添加，其不是本文研究的重點(diǎn)，況且既然您在閱讀本文，這些配置相信早已不在話下了。

效仿 electorn 分離main及renderer，在 src 中創(chuàng)建 api 及 web 目錄。效仿 vue-cli ，在根目錄下創(chuàng)建 public 目錄用于存放根目錄下的靜態(tài)資源文件。