基于antd pro框架，配置接口apiUrl前缀

基于antd-pro框架，配置package.json中的打包命令，实现不同环境使用不同的接口apiUrl前缀，避免人肉修改，保证各环境对应各自的api地址。

背景

这阵子，在玩antd-pro，感觉整体框架基本是一套很完善的管理系统，因此也将该套框架运用到实际项目中，UI、组件啥的都没有问题，就是在打包部署的时候，本地开发、测试、线上接口api前缀不同，打包发布到测试环境和线上环境，需要人为的去修改config中的path配置，感觉多少有点不方便，而且也容易出现问题。鉴于这个背景，在闲暇之余，研究了一下umi中的参数配置，将这个风险性事件，一次性从源头解决。

解决思路

结合目前的情况，我们现有三个环境，本地开发、测试环境、预发布环境、生产环境，各个环境除了接口api的前缀不同之外没有其他差别。
我们应该在打包命令中，配置三个命令dev、build(test在命令中已被使用成测试)、prod。
我们的程序代码，根据不同的打包命令，去配置对应环境下的接口apiUil前缀。

具体实现

package.json

    "dev": "cross-env UMI_ENV=dev umi dev","build": "cross-env UMI_ENV=test umi build","prod": "cross-env UMI_ENV=prod umi build",

我们通过cross-env设置一个参数UMI_ENV，分别赋值为dev、test、prod，对应开发、测试、线上环境。

config/config.js

我们需要在define中，配置一下我们的环境变量，通过 webpack 的 DefinePlugin 传递给代码

  define: {'process.env.UMI_ENV':process.env.UMI_ENV || 'dev',},

其实这里，已经可以直接配置apiUrl了，只是前期，我们加了一个全局的配置文件，为了减少修改，这里还是用一个环境变量process.env.UMI_ENV存储一下

全局的path.js

let path = 'http://10.0.7.24:13019/api';
console.log('环境',process.env.UMI_ENV)
if(process.env.UMI_ENV==='test'){path = 'http://10.0.7.6:13019/api'
}
if(process.env.UMI_ENV==='prod'){path = 'https://xxx.yyy.com/api'
}
export default path;

具体的打包

# 本地开发
npm run dev# 打包测试环境
npm run build# 打包生产环境
npm run prod

注意

此处在path.js中打印process.env会发现，并没有UMI_ENV属性，这个假象也一度让我觉得值没有传递过来，但是实际通过process.env.UMI_ENV能够获取到我们设定的参数，这个地方为何看不到属性，我也在查询中

参考

umi 配置多环境打包
define 通过 webpack 的 DefinePlugin 传递给代码

基于antd pro框架，配置接口apiUrl前缀相关推荐

java antd实现登录,基于 antd pro 的短信验证码登录
概要整体流程前端页面代码请求验证码和登录的 service (src/services/login.js) 处理登录的 model (src/models/login.js) 后端短信验证码 ...
antd.pro中表格的国际化处理
antd.pro最近更新额V5版本,于是使用了最新的版本.V5版本抛弃了dva的数据流配置方式(狗头:原因就是配置太繁琐了,你要为每个module配置module文件,并且使用generator的方式 ...
实习手册一（Python基于Tornado框架的接口响应服务）软件下载与环境配置
目录一.软件下载及环境配置: 1.Homebrew 2.python3.9 3.PyCharm专业版 4.MySQL 5.Navicat for MySQL 6.Redis 7.Postman 此次 ...
接口自动化平台（一）：antd + antd pro 安装和简介
目录 1. antd 1.1 进入ant.design官网做初步了解 1.2 安装antd 1.3 动手实际操作 2. ant design pro 2.1 antd pro介绍 2.2 antd p ...
python自动化框架pytest接口关联串联_基于python接口自动化框架搭建_pytest+jenkins+allure...
本接口测试框架使用python语言实现,基于pytest测试框架,同时集成Jenkins和Allure 核心特性封装requests请求,使用装饰器模式详细的请求日志输出环境与数据隔离,实现不同 ...
基于layui的框架模版，采用模块化设计，接口分离，组件化思想
代码地址如下: http://www.demodashi.com/demo/13362.html 1. 准备工作编辑器vscode,需要安装liveServer插件在前端开启静态服务器或者使用hb ...
antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步在dva中主要分为3层 services models components models层用于存放数据 ...
基于springboot的支持http接口+dubbo接口的TestNG自动化测试框架
一.背景由于大多数公司都是使用Java作为后端开发语言,因此为了更好的与研发的框架对接.测试,掌握一套Java的自动化测试框架也逐渐成为测试人员的必修课. 同时随着现在微服务框架的流行,自动化测试框 ...
无线专题 openwrt feeds、web框架luci(lua语言)、UCI (统一配置接口)
1.openwrt feeds UCI (统一配置接口)openwrt官方说明(有中文版本):https://oldwiki.archive.openwrt.org/zh-cn/doc/uci 在Op ...