脚本宝典收集整理的这篇文章主要介绍了Vue SSR学习，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近学习了下vue ssr方面知识，学习过程为

1. 先大致过了一遍官方VUE SSR文档，一路看下来还是有些懵逼的，跟着官方步骤下来我是没办法搭一个简单的vue-ssr的demo，所以网上找了下tutorial
2. 强烈推荐从0开始，搭建Vue2.0的SSR服务端渲染，跟着作者一步步搭建，可以循序渐进的理解vue ssr是怎么实现的
3. 然后就是自己回到官网，不用脚手架一步步用webpack搭建vue基础环境，这里主要参考vue-loader和webapck文档，ssr方面内的配置主要参考了vue ssr官方例子hackernews的配置与实现。

先说明下采用的各个主要package的版本如下：

• vue 2.5.21
• vue-server-renderer 2.5.21
• webpack 4.27.1
• vue-loader 15.4.2

然后分享下学习中碰到的问题，具体搭建和学习参见demo和上面步骤2文章链接，作者写的很好。

1. 终端代理设置
   在我把官方hackerners的例子下下来，装好依赖跑起来，控制台显示成功了，但是代开浏览器，却一直不显示页面，后来在issue中查到，你运行的Terminal需要翻墙，具体可以见issue。这里是解决问题，但是后面自己的demo用axios请求出了问题，自己mock的一些数据在浏览器中输入http://localhost:3000/api/user是可以出来数据的，但是起的服务却老是出错，后来查到因为我设置了终端的Proxy，axios会自动检测到并使用他，所以他请求的url一直是

   

   ，所以遇到一个连环问题，解决的话参考axios这个issue去掉终端的PRoxy
2. document is not defined
   服务器环境是没有document的，webpack如果用了MiniCssExtractPlugin会提取css会用到document，所以在服务器端的webpack配置中需要去掉，这一部分参考了这篇文章，也可以参考我的webpack配置看一看
3. css 打包不到一个文件
   webpack4中使用splITchunks这个配置来优化和做缓存策略，然而我怎么配置都css文件不会被打包成一个

   

   ，搜索了很久终于看到MiniCssExtractPlugin的issue中解决

   

   ，这样就打包到一个css文件，后来持续关注到知道这是webpack的一个bug。
4. 开发环境热重载
   这里我用的是官方的方法，照抄过来的[逃:)]，基本原来我觉得应该就是利用webpack-hot-middleware和webpack-dev-middleware来实现的，因为webpack-dev-middleware是一个exPress中间件，它实现fs基于内存，提高了编译读取速度；然后通过watch文件的变化，动态编译

结束

其实vue ssr大致的工作原理就是，在你请求url或者刷新的时候，会走服务器端，服务器端将通过ssr来render出一份htML输出，接下来页面切换其实就是我们平常的vue单页应用，但是实际上爬虫每次爬的你的url都是对应的html内容，所以达到ssr的目的。
欢迎讨论和大佬的指导，放上github地址

脚本宝典总结

以上是脚本宝典为你收集整理的Vue SSR学习全部内容，希望文章能够帮你解决Vue SSR学习所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。