正如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' | bashecho "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
