为了前后端分离,我们在前端和api层中间,架构了一层node层,用来做服务端渲染,来加快用户的首屏可用和对搜索引擎的友好。项目一开始放置在同一个git仓库里面,分别放在client目录和server目录中(或者类似于vue 官方例子中的一样,node服务可能只有一个sever.js。因为server中可能需要client中的一些资源,所以不得不将他们放在一起。后来通过配置中心驱动之后,client 和server 可以完全独立,通过配置中心建立连接。所以完全可以将client项目和server项目分离开。

其实就是在前端项目中,再做了一次前后端分离,这次分离的原因 跟与api的前后端分离有些不一样。这次是因为 第一个 前端vue项目本就是一个完全独立的项目,拖着server项目反而显的不是那么灵活,同样,server里面包含了client,虽然可以独立发布,但是因为迭代周期的不同,在管理分支上面总归有点变扭,索性分开,各过各的 各过各的是极好的,可是开发的时候怎么各过各的啊(f***~),我开发的时候要走服务端渲染的逻辑的啊,你让我先基于客户端开发,然后再配合着node调试一波?那可不是反而增加了开发成本 有没有可以让client独立也能跑ssr的逻辑,然后最后只要跟正式的node服务通过配置中心配合起来就好了呢? 有啊,给client配置一个简单的服务不就好了么?一般的nodessr不都是这样的么 说白了就我上面说的,一个sever.js。里面是一个基于koa的简单服务,加上了koawepack的中间件(koa-webpack),用来做开发时候的热加载。 然后通过不同的启动脚本,来配置上不同的环境变量参数,以此来启动不同的页面开发,这样子,开发就方便多了,npm run start:home 就是开发首页,npm run start:video 就是开发播放页 后面加上server参数就是开发服务端渲染 例如 npm run start:home:server (这里我只提供一个思路昂~具体实现要讲的东西太多了,这里不太想写 >_>~~)

容灾

既然是个node服务,那么对于服务也要有相应的容灾方案,不然怎么放心将大流量交给它 那么,我们需要一个降级方案以备不时之需(以下内容需要建立在你对vuessr有一定了解的基础之上) 首先 vue 服务端渲染都有两个入口文件,entryclient.js和entryserver.js 如果要支持降级,那么需要在entryclient.js上面动一些手脚,我们仍然以官方例子为例 现在index.temlate.html 增加一个客户端渲染容器,一个名为de-app的div(<!--vue-ssr-outlet-->是服务端渲染的占位符)

vue项目与node项目分离的更多相关文章

  1. vue+express+mysql +node项目搭建

    项目搭建前需要先安装node环境及mysql数据库. 1.利用vue-cli脚手架创建一个vue项目 a.全局安装 npm install -g vue-cli b.初始化项目 vue init we ...

  2. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  3. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  4. node、Mongo项目如何前后端分离提供接口给前端

    node接口编写,vue-cli代理接口方法  通常前端使用的MocK 数据的方法,去模拟假的数据,但是如果有node Mongodb 去写数据的话就不需要在去mock 数据了,具体的方法如下. 首先 ...

  5. Vue+Spring Boot 前后端分离的商城项目开源啦!

    新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...

  6. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  7. 【前端】Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  8. Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  9. Vue.js经典开源项目汇总-前端参考资源

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

随机推荐

  1. 【HDU2204】Eddy's爱好

    题目大意:求从 1 到 N 中共有多少个数可以表示成 \(M^K,K \gt 1\).\(N \le 1e18\) 题解: 发现 N 很大,若直接枚举 M 的话有 1e9 级别的数据量,肯定超时,因此 ...

  2. 本地安装sass出错问题解析

    2016年3月23日个人博客文章--迁移到segmentfault 安装sass ruby安装因为sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby 在安装的时候 ...

  3. MyEclipse使用教程:使用工作集组织工作区

    [MyEclipse CI 2019.4.0安装包下载] 工作集允许您通过过滤掉不关注的项目来组织项目视图.激活工作集时,只有分配给它的项目才会显示在项目视图中. 如果您的视图中有大量项目,这将非常有 ...

  4. centos7时区同步(时间24小时格式显示)

    我们在服务器安装linux系统时,有时会因服务器时间或者时区不正确导致程序出现错误. 首先输入date命令查看当前的时间和时区.要注意CST   EDT 等时区的区别 介绍一种与时间服务器上时间同步的 ...

  5. marquee跑马灯效果的相关属性

    介绍HTML设置滚动文字marquee的相关属性 ㈠文字滚动标签 设置文字滚动使用<marquee></marquee>标签,可以再标签里面设置字体的颜色,字号,字体大小等. ...

  6. C# AVI Image 转换

    AVI视频库 http://download.csdn.net/download/qc_id_01/9970151 Avi视频文件的编码有很多,这个库只支持部分Avi文件,有些Avi文件不支持,具体哪 ...

  7. 2018 焦作网络赛 L Poor God Water ( AC自动机构造矩阵、BM求线性递推、手动构造矩阵、矩阵快速幂 )

    题目链接 题意 : 实际上可以转化一下题意 要求求出用三个不同元素的字符集例如 { 'A' .'B' .'C' } 构造出长度为 n 且不包含 AAA.BBB CCC.ACB BCA.CAC CBC ...

  8. git远程相关

    git remote add origin git仓库地址 // 添加了远程仓库 git remote remove origin // 移除远程仓库 git push -u origin maste ...

  9. 使用keil生成bin文件

      相关文件  下载http://pan.baidu.com/share/link?shareid=478269&uk=1107426113 使用kei自带的工具的话是 打开Options f ...

  10. 【每日一包0009】group-array

    [github地址:https://github.com/ABCDdouyae...] group-array 对数组里面的多项按照指定的key进行整合 用法:group-array(arr, key ...