开始之前先附上我的成品项目地址（喜欢的话点个小星星）：github.com/1912820899/…

开始教程之前需要先说明一下，由于博客前台之前使用SPA写的，现在拿来重构，所有本教程将不会借助vue-cli 和 nuxt.js来进行开发vue-ssr。

一.前置知识储备

1.webpack安装配置打包，还不懂的请先最少要看一遍官方文档，手动跟着敲一下：webpack.docschina.org/guides/

2.koa2 的理解与使用，不懂的看我博客分享的koa2视频，做一个入门：www.9cka.cn/nodejs

3.熟悉vue.js相信能看到这篇文章的，对vue.js已经不陌生了吧。

二.整体概括

1.vue-ssr的原理

三.环境配置

1.初始化一个项目

npm init -y
复制代码

2.安装vue vue-server-render

npm install vue vue-server-renderer -S
复制代码

3.配置webpack4

  为什么需要webpack？

由于vue-server-render 需要通过webpack来打包生成Bundle Renderer （看完webpakc的就知道，Bundele Renderer就是json文件，里面控制着如何调用和调配代码，管理所有所需模块之间的交互，可以说是程序的一个地图）

3.1 安装webpack 和webpakc-cli

npm install webpack webpack-cli -S复制代码

3.2 配置webpack

未完待续。。。