引言
沉舟侧畔千帆过,病树前头万木春
为什么要整两句诗呢?我也不知道。就是感觉很厉害!(每一个小白终将成为大佬,从入门到黄袍加身)
哈喽,大家好!我是陈坚强。一个有代码洁癖的前端攻城狮( 哈哈,生活很邋遢(* ̄︶ ̄) )
小伙伴看到标题会问了,整ssr用nuxt不就完事了?绿色又环保。但是小编想说了:你保不住有项目一开始不是直接用的nuxt呢?哈哈~,今天就基于vue/cli来一个ssr
那~! 开始吧~~
什么是服务端渲染
这个概念不用说了吧,就是 Server(服务) Side(端) Render(渲染)。额~,这么解释没毛病。具体细节送上尤大的文档飞机票
CSR & SSR图解
虽然上面的解释很清楚了,但是还是画个图吧(画面感极强!)
初始化项目
这个也不用说了吧?虽然小编也是个小白,但是vue项目不知道怎么创建的话,那~ em~~,有点说不过去,就下面个情况
干干净净啥也没有,查看源代码是这样的
改造原客户端文件
路由
vuex
项目入口文件
创建客户端&服务端入口文件
增加服务端入口html
- public/index-ssr.html
客户端
服务端
修改vue/cli配置
这个时候我们需要下载插件,下面的两个插件都在一个包里
- vue-server-renderer
- client-plugin
- server-plugin
创建服务端文件
服务端采用koa搭建 需要下载的npm包,koa
,koa-router
,koa-mount
,koa-static
, cross-env
, nodemon
。需要用axios
来请求数据,memory-fs
写数据
server/index.js
server/router.js
修改启动命令
启动项目
- npm run client
- npm run server
接下来让我们再来查看网页源代码,注意是3000端口 大公告成 ,还没有15分钟吧,啊哈哈哈...
结束语
这次的Vue SSR中问题不少,是因为小编能力有限(小白一个),但是仍然在从入门到放弃的路上奔跑,
最后附上git仓库地址,原版是TS的模板进行的SSR,怕大佬们笑话,就改成了js,加油!喜欢可以点赞,关注哦~,一起学习!