正如Vue官方所说，SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请先移步ssr.vuejs.org 了解手工进行SSR配置的基本内容。
从头搭建一个服务端渲染的应用是相当复杂的。如果您有SSR需求，对Webpack及Koa不是很熟悉，请直接使用NUXT.js。
本文所述内容示例在 Vue SSR Koa2 脚手架 ： https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold
我们以撰写本文时的最新版：Vue 2，Webpack 4，Koa 2为例。
特别说明
此文描述的是API与WEB同在一个项目的情况下进行的配置，且API、SSR Server、Static均使用了同一个Koa示例，目的是阐述配置方法，所有的报错显示在一个终端，方便调试。
初始化项目
git init yarn init touch .gitignore
在 .gitignore 文件，将常见的目录放于其中。
.DS_Store node_modules # 编译后的文件以下两个目录 /dist/web /dist/api # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
根据经验来预先添加肯定会用到的依赖项：
echo "yarn add cross-env # 跨平台的环境变量设置工具 koa koa-body # 可选，推荐 koa-compress # 压缩数据 compressible # https://github.com/jshttp/compressible axios # 此项目作为API请求工具 es6-promise vue vue-router # vue 路由 注意，SSR必选 vuex # 可选，但推荐使用，本文基于此做Vuex在SSR的优化 vue-template-compiler vue-server-renderer # 关键 lru-cache # 配合上面一个插件缓存数据 vuex-router-sync" | sed 's/#[[:space:]].*//g' | tr '\n' ' ' | sed 's/[ ][ ]*/ /g' | bash echo "yarn add -D webpack webpack-cli webpack-dev-middleware # 关键 webpack-hot-middleware # 关键 webpack-merge # 合并多个Webpack配置文件的配置 webpack-node-externals # 不打包node_modules里面的模块 friendly-errors-webpack-plugin # 显示友好的错误提示插件 case-sensitive-paths-webpack-plugin # 无视路径大小写插件 copy-webpack-plugin # 用于拷贝文件的Webpack插件 mini-css-extract-plugin # CSS压缩插件 chalk # console着色 @babel/core # 不解释 babel-loader @babel/plugin-syntax-dynamic-import # 支持动态import @babel/plugin-syntax-jsx # 兼容JSX写法 babel-plugin-syntax-jsx # 不重复，必须的 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
现在的npm模块命名越来越语义化，基本上都是见名知意。关于Eslint以及Stylus、Less等CSS预处理模块我没有添加，其不是本文研究的重点，况且既然您在阅读本文，这些配置相信早已不在话下了。
效仿 electorn 分离main及renderer，在 src 中创建 api 及 web 目录。效仿 vue-cli ，在根目录下创建 public 目录用于存放根目录下的静态资源文件。
|-- public # 静态资源 |-- src |-- api # 后端代码 |-- web # 前端代码
譬如 NUXT.js ，前端服务器代理API进行后端渲染，我们的配置可以选择进行一层代理，也可以配置减少这层代理，直接返回渲染结果。通常来说，SSR的服务器端渲染只渲染首屏，因此API服务器最好和前端服务器在同一个内网。
配置 package.json 的 scripts ：
"scripts": { "serve": "cross-env NODE_ENV=development node config/server.js", "start": "cross-env NODE_ENV=production node config/server.js" }
yarn serve : 启动开发调试
yarn start : 运行编译后的程序
config/app.js 导出一些常见配置：
module.exports = { app: { port: 3000, // 监听的端口 devHost: 'localhost', // 开发环境下打开的地址，监听了0.0.0.0，但是不是所有设备都支持访问这个地址，用127.0.0.1或localhost代替 open: true // 是否打开浏览器 } }
配置SSR
我们以Koa作为调试和实际运行的服务器框架， config/server.js :
const path = require('path') const Koa = req uire('koa') const koaCompress = require('koa-compress') const compressible = require('compressible') const koaStatic = require('./koa/static') const SSR = require('./ssr') const conf = require('./app') const isProd = process.env.NODE_ENV === 'production' const app = new Koa() app.use(koaCompress({ // 压缩数据 filter: type => !(/event\-stream/i.test(type)) && compressible(type) // eslint-disable-line })) app.use(koaStatic(isProd ? path.resolve(__dirname, '../dist/web') : path.resolve(__dirname, '../public'), { maxAge: 30 * 24 * 60 * 60 * 1000 })) // 配置静态资源目录及过期时间 // vue ssr处理，在SSR中处理API SSR(app).then(server => { server.listen(conf.app.port, '0.0.0.0', () => { console.log(`> server is staring...`) }) })
上述文件我们根据是否是开发环境，配置了对应的静态资源目录。需要说明的是，我们约定编译后的API文件位于 dist/api ，前端文件位于 dist/web 。
参考 koa-static 实现静态资源的处理， config/koa/static.js :