最近学习了下vue ssr方面知识，学习过程为先大致过了一遍官方VUE SSR文档,一路看下来还是有些懵逼的，跟着官方步骤下来我是没办法搭一个简单的vue-ssr的demo，所以网上找了下tutorial强烈推荐从0开始，搭建Vue2.0的SSR服务端渲染，跟着作者一步步搭建，可以循序渐进的理解vue ssr是怎么实现的然后就是自己回到官网，不用脚手架一步步用webpack搭建vue基础环境，这里主要参考vue-loader和webapck文档，ssr方面内的配置主要参考了vue ssr官方例子hackernews的配置与实现。先说明下采用的各个主要package的版本如下：vue 2.5.21vue-server-renderer 2.5.21webpack 4.27.1vue-loader 15.4.2然后分享下学习中碰到的问题，具体搭建和学习参见demo和上面步骤2文章链接，作者写的很好。终端代理设置在我把官方hackerners的例子下下来，装好依赖跑起来，控制台显示成功了，但是代开浏览器，却一直不显示页面，后来在issue中查到，你运行的Terminal需要翻墙，具体可以见issue。这里是解决问题，但是后面自己的demo用axios请求出了问题，自己mock的一些数据在浏览器中输入http://localhost:3000/api/user是可以出来数据的，但是起的服务却老是出错，后来查到因为我设置了终端的proxy，axios会自动检测到并使用他，所以他请求的url一直是，所以遇到一个连环问题，解决的话参考axios这个issue去掉终端的proxydocument is not defined服务器环境是没有document的，webpack如果用了MiniCssExtractPlugin会提取css会用到document，所以在服务器端的webpack配置中需要去掉，这一部分参考了这篇文章，也可以参考我的webpack配置看一看css 打包不到一个文件webpack4中使用splitchunks这个配置来优化和做缓存策略，然而我怎么配置都css文件不会被打包成一个，搜索了很久终于看到MiniCssExtractPlugin的issue中解决，这样就打包到一个css文件，后来持续关注到知道这是webpack的一个bug。开发环境热重载这里我用的是官方的方法，照抄过来的[逃:)]，基本原来我觉得应该就是利用webpack-hot-middleware和webpack-dev-middleware来实现的，因为webpack-dev-middleware是一个express中间件，它实现fs基于内存，提高了编译读取速度；然后通过watch文件的变化，动态编译结束欢迎讨论和大佬的指导，放上github地址，还有线上地址