react npm run build打包项目传参数

问题描述

我们项目使用用k8s集群，前端有登录和管理两个服务组成，管理服务代码是antd pro框架写的。
我们的管理服务的代码几乎不变，但登陆页面会根据客户需求变化。
不同的登陆页面，退出登陆有区别。
考虑管理服务的代码不同项目只是细微差别，单独拉分支，没有必要。我们一般都是脚本部署项目，直接从代码库拉代码。
所以我们可以根据打包参数的不同，判断不同的退出登陆接口。

代码展示

第一步

antd pro 用的是umi, umi 的属性define可以直接配置
在 config.js中修改，我用的是ts位置如下

文件最上面引用，作用是获得打包赋值的参数
const Project_Address = process.env.npm_config_pro;

重新定义打包的参数可以在项目其他文件中使用
define: {
    ProjectAddress:Project_Address||'wenzhou',
  },

第二步

项目其他文件直接使用，不需要import引用

console.log(`${ProjectAddress}`);

第三步

直接打包项目部署，就可以获得打包的参数，唯一不好的是我测试用
npm start --pro=gansu 不回生效，只有npm run build --pro=gansu才生效

npm run build --pro=gansu