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) ...
随机推荐
- 一个简单的c++类的定义和实例化
#include "iostream" #include <string> using namespace std; class mycoach { private: ...
- hiho #1032: 最长回文子串
#1032 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...
- qt5--文件操作
文本文件的读写操作: #include "win.h" #include "ui_win.h" #include <QDebug> #include ...
- Linux 查看内存条数据和大小命令
查看内存条数据和大小命令: sudo dmidecode | grep -A16 "Memory Device$" 需要root 权限.. [life@localhost mp3b ...
- Docker安装Mysql和Nginx
1. 序言 将应用容器化更方便于管理,昨天辛辛苦苦安装在宿主机上的,今天狠心重置服务器,学下docker练练手. 2. Get start 2.1 安装Docker 公司的云用的是ubuntu,我自己 ...
- static后期静态绑定
先说一下__CLASS__,get_class() , get_called_class() 区别: __CLASS__获取当前的类名, get_class()与上面一样,都是获取当前的类名, ge ...
- jquery grid 显示隐藏列
colModel: [ { label: '列名称', name: 'columnName', width: 100, align: 'left' } ] function showData() { ...
- idea2018.3.6安装与破解教程(亲测可用、破解到2100年)
最近,帮室友进行idea安装,之前自己安装借鉴的博客已404,在网上找了好几个都无效,想着总结一份备用. 此博客是又找了一台电脑,边安装边写的. 目录 (已安装好的,可以直接看idea2018.3.6 ...
- 1209F - Koala and Notebook
这场比赛没打,看同学fst了,于是来看看. 这道题看似简单,但是没想清楚细节真的不太行.像现在熬到十一点左右,脑子真的不行. 首先显然位数越小越好,因为每一位要比较,不如拆点.此时要拆成两条有向链(开 ...
- Jmeter连接Redis服务缓存
1.添加线程组->Sampler->BeanShell Sampler,加入以下内容: import redis.clients.jedis.Jedis; import org.apach ...