Vue SSR学习
最近学习了下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.21
- vue-server-renderer 2.5.21
- webpack 4.27.1
- vue-loader 15.4.2
然后分享下学习中碰到的问题,具体搭建和学习参见demo和上面步骤2文章链接,作者写的很好。
- 终端代理设置
在我把官方hackerners的例子下下来,装好依赖跑起来,控制台显示成功了,但是代开浏览器,却一直不显示页面,后来在issue中查到,你运行的Terminal需要翻墙,具体可以见issue。这里是解决问题,但是后面自己的demo用axios请求出了问题,自己mock的一些数据在浏览器中输入http://localhost:3000/api/user
是可以出来数据的,但是起的服务却老是出错,后来查到因为我设置了终端的proxy,axios会自动检测到并使用他,所以他请求的url一直是,所以遇到一个连环问题,解决的话参考axios这个issue去掉终端的proxy - document 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文件的变化,动态编译
结束
其实vue ssr大致的工作原理就是,在你请求url或者刷新的时候,会走服务器端,服务器端将通过ssr来render出一份html输出,接下来页面切换其实就是我们平常的vue单页应用,但是实际上爬虫每次爬的你的url都是对应的html内容,所以达到ssr的目的。
欢迎讨论和大佬的指导,放上github地址
相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13