这个需求,在实战中蛮有用的。但没有看到网上太多文档,就自己hack了一个思路。供指正。

需求

在前后端分离的项目开发中,前后端的开发步骤和进度是不一致的。有时,前端为了不等待后端的API开发进度,会自己mock一个服务,来实现效果的展示。

等后端开发完成之后,才切到真正的后端API。

这里有一个小小的问题,一般的情况下,会改一个配置,或是直接禁用mock,就直接访问后端了。BUT,但是,如果想一个一个路由的切呢?(比如,一个人开发前后端分离模式时,可以交替编写前后端,又或是后端的API是其它人分批提供的)。

这时,就需要我们可以自主的选择哪些API仍然使用MOCK,哪些API则使用正式的后端。

实现

这个方案是基于iczer的vue-antd-admin(https://gitee.com/iczer/vue-antd-admin)项目。如果是vue-element-admin之类的,实现方案也是大同小异。

这个方案的核心,就是区分MOCK的后端URL地址和真正提供测试服务的后端URL。

一,在项目根目录的.env.depelopment文件里新增一个REAL_URL

VUE_APP_API_BASE_URL=http://mock.localhost.com
VUE_APP_API_REAL_URL=http://localhost:8085

为了不改动更多代码,VUE_APP_API_BASE_URL保持不变,VUE_APP_API_REAL_URL作为真实的后端地址。.env文件一般用于生产环境,前后端肯定全通,也就不必要调整

二,在services目录下的api.js文件中,自定义使用路由的后端地址

//跨域代理前缀
// const API_PROXY_PREFIX='/api'
// const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
const BASE_URL = process.env.VUE_APP_API_BASE_URL
const REAL_URL = process.env.VUE_APP_API_REAL_URL
module.exports = {
LOGIN: `${REAL_URL}/login`,
ROUTES: `${BASE_URL}/routes`
}

比如,在这种情况下,/login用真实后端API,而/routes,依旧使用mock服务。更多路由依此切换,完美解决~~~

iczer的vue-antd-admin项目,逐步平滑迁移mock的url的更多相关文章

  1. 企业应用架构研究系列二十七:Vue3.0 之环境的搭建与Vue Antd Admin探索

    开发前端需要准备一些开发工具,这些工具怎么安装就不详细描写了,度娘一些很多很多.主要把核心的开发工具列表一些,这些资源也是非常容易找到和安装的. Node 安装:https://nodejs.org/ ...

  2. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  3. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  4. Vue经典开源项目

    Vue常用的开源项目和插件库 UI组件 element ★34,784 - 饿了么出品的基于Vue2的web UI工具套件storybook ★33,503 - 响应式UI 开发及测试环境Vux ★1 ...

  5. 跟我一起做一个vue的小项目(七)

    先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...

  6. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  7. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  8. Vue常用开源项目汇总

    前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  9. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

随机推荐

  1. centOS7永久关闭防火墙(防火墙的基本使用(转)

    查看防火墙状态: systemctl status firewalld.service 如图 绿的running表示防火墙开启 执行关闭命令: systemctl stop firewalld.ser ...

  2. selenium-远程调用

    1.拉去镜像: docker pull selenium/hub docker pull baozhida/selenium-node-chrome-debug:58 docker pull baoz ...

  3. Linux命令之{ }花括号

    括号扩展:{ } {} 可以实现打印重复字符串的简化形式 [10:04:14 root@C8[ 2020-06-16DIR]#echo file{1,3,5} file1 file3 file5 [1 ...

  4. C2. Power Transmission (Hard Edition) 解析(思維、幾何)

    Codeforce 1163 C2. Power Transmission (Hard Edition) 解析(思維.幾何) 今天我們來看看CF1163C2 題目連結 題目 給一堆點,每兩個點會造成一 ...

  5. Memcached 的惹祸,.NET 5.0 的背锅

    抱歉,拖到现在才写这篇为 .NET 5.0 洗白的博文(之前的博文),不好意思,又错了,不是洗白,是还 .NET 5.0 的清白. 抱歉,就在今天上午写这篇博客的过程中,由于一个bug被迫在访问高峰发 ...

  6. JPA 相关API (一)

    [Query 接口下的常用API] [API 测试类:Test_QueryAPI.java] 1 package org.zgf.jpa.entity; 2 3 import java.math.Bi ...

  7. AtCoder Grand Contest 013D: Piling Up 题解

    题意简化: [luogu] Piling Up 一开始有n个颜色为黑白的球,但不知道黑白色分别有多少,m次操作,每次先拿出一个球,再放入黑白球各一个,再拿出一个球,最后拿出的球按顺序排列会形成一个颜色 ...

  8. Luogu P5450 [THUPC2018]淘米神的树

    题意 写的很明白了,不需要解释. \(\texttt{Data Range:}1\leq n\leq 234567\) 题解 国 际 计 数 水 平 首先考虑一开始只有一个黑点的情况怎么做. 我们钦定 ...

  9. 4G DTU是什么?

    要从任何设备(个人计算机.平板电脑或智能手机)访问Internet,需要DTU或热点.大多数宽带和移动DTU在"4G"或第四代网络系统上运行.虽然互联网连接的许多基本原则与4G D ...

  10. Bash echo输出带颜色和背景的文本

    Bash echo输出带颜色和背景的文本 1.先上效果图 2.bash代码 #!/bin/bash #************************************************* ...