react / umi 配置自定义环境变量

最新推荐文章于 2025-04-10 20:32:35 发布

腰果虾仁

最新推荐文章于 2025-04-10 20:32:35 发布

阅读量6.5k

点赞数 1

分类专栏： react.js 文章标签： reactjs webpack npm javascript

本文链接：https://blog.youkuaiyun.com/weixin_42584321/article/details/116711685

版权

本文介绍了如何在基于create-react-app和umi的项目中配置自定义环境变量。推荐使用cross-env插件，通过修改package.json和配置文件实现环境变量的设定。在react项目中，可通过eject暴露webpack配置，并在env.js中添加自定义变量。在umi项目中，UMI_ENV变量配合环境配置文件实现不同环境的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在我们开发一个项目时，有些情况需要我们根据不同环境执行不同的操作，而内置的 process.env 中的环境变量不足以满足需求时，我们就需要手动来配置自定义的环境变量了。

一、react（项目环境：create-react-app 脚手架）

方案一：使用 cross-env 插件（推荐）

使用 cross-env 是一种比较常见的做法。
由于我这里是脚手架搭建的，后面的步骤需要执行 npm run eject 把 webpack 配置暴露出来，注意项目一旦执行 npm run eject 操作后不可逆。

项目基于 react 脚手架环境搭建，首先安装 cross-env 插件

npm install cross-env -D

安装完成之后，修改 package.json 文件中的 scripts

"scripts": {
   
    // cross-env PORT=8080 修改执行 npm start 启动时的端口号
	"start": "cross-env PORT=8080 node scripts/start.js",
    // cross-env  CUSTOM_ENV=custom 修改执行 npm run build:dev 时的 process.env.CUSTOM_ENV 环境变量
	"build": "cross-env CUSTOM_ENV=prod node scripts/build.js",
	"build:dev": "cross-env CUSTOM_ENV=dev node scripts/build.js",
	"test": "node scripts/test.js"
},