vue前端进阶之SSR篇 --- 搭建简单的SSR框架

理解ssr

博主最近招前端，发现大部分的前端只会写js、css等。对于后端以及服务器一无所知。但是容器化时代，所有程序必然是独立应用。所以ssr这样的偏后端技术是不可或缺的。博主身为一个全栈架构，觉得有必要向大家展示完全不神秘并非常简单的ssr

首先我们来看张图：

总之，SSR就是类似于老的node ejs或者java jsp方式的web技术。使用后端将html全部准备好，直接抛给前端。

SSR的重要性

当前端为vue、react这种spa应用时，非常不利于SEO，各种路由的跳转也变得复杂，并且在首屏渲染时间上也花费了大量时间。在整体架构部署上，还需要利用各种web服务（如ngxin），这点很麻烦

非SSR

可以看到，普通的spa项目部署非常简单，根据环境打包后，把静态资源自动上传至cdn，然后随便nginx上设置一下就行了，前面挂一个LB，这种只涉及到静态资源的部署，非常适用于后台管理系统。

SSR

上图看到，SSR部署因为涉及到后端，所以需要部署node（可以使用pm2托管）。
那么就会有两个web服务：node和nginx。 当然，你可以只保留一个，把nginx去掉，这样的话。你需要在node服务中进行一些转发规则的配置
当你的前端是SSR，说明自带web服务。我们可以利用serverless方式部署：

你会发现你的前端项目完全变成了一个应用程序

了解vapper

ssr会有一定的难度，有没有一种框架，可以让你的vue默认变成ssr，而你编程方式还是写普通的vue文件？

当然，水滴团队推出的这个框架实在太赞了。博主使用它搭建开箱即用的脚手架，直接上了生产

https://vapperjs.org/zh/introduction.html

制作简易版脚手架

我们使用vapper框架来只做一个简单的脚手架，方便开发

vue框架

可以使用vue cli3创建项目，这里博主就不多减少了。不过vapper提供了一个简单的模板。可以直接下载下来。博主使用npm，所以删掉了yarn.lock
vapper example
下载下来后，可以直接运行，发现已经是ssr了

环境区分

上生产的话，这些完全不够。我们需要针对不同环境做区分

首先，我们来四种环境：

• qa：测试环境
• demo：预发环境
• prod：生产环境
• development： 开发环境

然后我们针对不同环境，编写打包命令：

我们使用环境，来区分接口前缀

export const getRootApi = function (urlRoot) {
  let apiRoot = 'http://localhost:9001' //本地后台接口地址
  if (process.env.NODE_ENV === 'production') {
    if (process.env.VUE_APP_ENV === 'qa') {
      apiRoot = ''//'qa环境的后台接口地址'
    } else if (process.env.VUE_APP_ENV === 'demo') {
      apiRoot = ''
    } else {
      apiRoot = ''
    }
  }
  if (urlRoot) {
    apiRoot = apiRoot + urlRoot
  }
  return apiRoot
}

目录结构

搞定编译打包与环境问题，我们开始设置目录结构

如图所示

• api：所有的后台接口
• assets：公共静态资源
• plugin：vapper自定义插件
• router： 路由
• views： 页面

api

模拟一个接口promise：

router

写两个页面，并且为了避免单例，每次路由直创建

必须这么写，不可以在外面定义router对象，用export导出，这样会不生效
export default () => {
  return new VueRouter({
    mode: 'history', //可以利用keep-alive
    routes: [
      ...demo2Router
    ]
  })
}

views

这样，我们来写一个helloword。

注意：当你需要ssr并需要数据预加载的时候，needSerialize: true 和 await是必须的

head信息

SEO, head的信息必不可少，如:meta description、canonical tag link、title
引入vue-meta，并在main中加入：

在vue里就可以随意设定meta信息了

打包运行

npm run dev,运行项目
npm run build打包，可以看到

网页源码里的确展示了页面信息，而不是spa应用的那些js

结束

项目地址：https://gitee.com/_madi/vapper-vue-ssr-docker.git

• simple是一个简单的样例
• master是一个admin系统，更为全面，开箱即用