vue项目与node项目分离
为了前后端分离,我们在前端和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项目分离的更多相关文章
- vue+express+mysql +node项目搭建
项目搭建前需要先安装node环境及mysql数据库. 1.利用vue-cli脚手架创建一个vue项目 a.全局安装 npm install -g vue-cli b.初始化项目 vue init we ...
- 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& ...
- Linux下Jenkins与GitHub自动构建Node项目(Vue)
根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...
- node、Mongo项目如何前后端分离提供接口给前端
node接口编写,vue-cli代理接口方法 通常前端使用的MocK 数据的方法,去模拟假的数据,但是如果有node Mongodb 去写数据的话就不需要在去mock 数据了,具体的方法如下. 首先 ...
- Vue+Spring Boot 前后端分离的商城项目开源啦!
新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总-前端参考资源
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
随机推荐
- react浏览器回退按钮的时候传递参数
本来是有这个需求的,但是后来发现回退不也是到某个页面吗?接下来就使用了redux,真香啊,不管用户怎么操作,你到这个界面都给他一个值就完事了,没有就不给他这个值. 哈哈哈,公司框架使用umi.上代码 ...
- ProGuard的作用、使用及bug分析(转载)
ProGuard的作用.使用及bug分析 本文主要ProGuard的作用.使用及bug分析.1.ProGuard作用ProGuard通过删除无用代码,将代码中类名.方法名.属性名用晦涩难懂的名称重命名 ...
- AngularJS基础语法
1.ng-app 决定了angularjs的作用域范围,你可以如下使用: <html ng-app> … </html> 来让angularjs渲染整个页面,也可以使用 < ...
- 如何在组件中监听vuex数据变化(当vuex中state变化时,子组件需要进行更新,怎么做?)
todo https://blog.csdn.net/qq_37899792/article/details/97640434
- web 多屏互动显示方案
1 基于 local storage 实现的信息传递 相关插件 lsbridge.js https://github.com/krasimir/l... 且项目中有非常简单易懂的示例你需要了解的一些关 ...
- C++入门经典-例5.5-空类型指针的使用
1:代码如下: // 5.5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- C++入门经典-例3.11-使用if语句来实现根据输入的字符输出字符串
1:代码如下: // 3.11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- SQL Server清空数据库中ldf日志文件
USE [master] ALTER DATABASE [Whir_InternalSystem] SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE [W ...
- Python遍历列表删除多个元素或者重复元素
在遍历list的时候,删除符合条件的数据,结果不符合预期 num_list = [1, 2, 2, 2, 3] print(num_list) for item in num_list: if i ...
- Scala学习(三)——集合
基本数据结构 Scala提供了一些不错的集合. 数组 Array 数组是有序的,可以包含重复项,并且可变. val numbers = Array(1, 2, 3, 4, 5, 1, 2, 3, 4, ...