阅读 1980

小白易懂 | 15分钟基于vue/cli完成服务端渲染

引言

沉舟侧畔千帆过,病树前头万木春

为什么要整两句诗呢?我也不知道。就是感觉很厉害!(每一个小白终将成为大佬,从入门到黄袍加身) 哈喽,大家好!我是前端Up主。一个有代码洁癖的前端攻城狮( 哈哈,生活很邋遢(* ̄︶ ̄) )

小伙伴看到标题会问了,整ssr用nuxt不就完事了?绿色又环保。但是小编想说了:你保不住有项目一开始不是直接用的nuxt呢?哈哈~,今天就基于vue/cli来一个ssr

那~! 开始吧~~

什么是服务端渲染

这个概念不用说了吧,就是 Server(服务) Side(端) Render(渲染)。额~,这么解释没毛病。具体细节送上尤大的文档飞机票

CSR & SSR图解

虽然上面的解释很清楚了,但是还是画个图吧(画面感极强!)

初始化项目

这个也不用说了吧?虽然小编也是个小白,但是vue项目不知道怎么创建的话,那~ em~~,有点说不过去,就下面个情况

干干净净啥也没有,查看源代码是这样的

改造原客户端文件

路由

vuex

项目入口文件

创建客户端&服务端入口文件

增加服务端入口html

  • public/index-ssr.html

客户端

服务端

修改vue/cli配置

这个时候我们需要下载插件,下面的两个插件都在一个包里

  • vue-server-renderer
    1. client-plugin
    2. 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,加油!喜欢可以点赞,关注哦~,一起学习!