最近研究了一下node环境变量小有所得，在react框架中可以实现配置不同命令运行或者打包不同的环境，想跟大佬们分享一下

于 2023-12-26 14:45:54 发布
阅读量62 收藏
点赞数
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dqwdm/article/details/135221841
版权

一、第一步（安装插件）

npm install -g env-cmd

二、第二步（在根目录下面设置.env文件）

# 设置环境变量 REACT_APP_API_URL=http://172.21.10.18

三、第三步（在package.json文件配置运行和打包命令）

"scripts": { "start:development": "env-cmd -f .env.development react-scripts start", "start:production": "env-cmd -f .env.production react-scripts start", "build:development": "env-cmd -f .env.development react-scripts build", "build:production": "env-cmd -f .env.production react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

四、第四步（获取.env文件的环境变量）

五、第五步（配置成功的样子）

退休保安王大爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-env:React应用程序的运行时环境变量
04-06
React Env-运行时环境配置 从填充您的环境.env文件在运行时，而不是构建时。 同构-服务器和浏览器兼容。 支持静态网站生成。 支持多个.env文件。 自述文件 例子 使用示例（请参阅README.md） 使用示例（请参阅README.md） 入门 该软件包从多个.env文件生成一个__ENV.js文件， .env文件包含白名单列出的环境变量，这些环境变量具有REACT_APP_介词。 在浏览器中，您的变量将在window.__ENV.REACT_APP_FOO和服务器process.env.REACT_APP_FOO上可用。 我们提供了一个辅助函数，使检索值变得更加容易： # .env REACT_APP_NEXT= " Next.js " REACT_APP_CRA= " Create React App " REACT_APP_NOT_SECRET_CODE=
Webpack项目学习：React-cli（脚手架）-合并开发和生产模式的配置-提高复用性
weixin_47295886的博客
03-28 243
/获取process进程上的env环境变量上的NODE_ENV。在package.json中有NODE_ENV=模式可以知道。MiniCssExtractPlugin旨在生成模式使用。开发模式希望有个HMR功能-借助插件+判断。重点是怎么知道当前环境的运行环境。如何获取NODE_ENV。查看打印结果，报错没关系。获取不同模式 进行判断。运行npm start。
react项目前端打包运行
日日留心的技术专栏
07-17 1989
1.修改baseUrl 添加本地测试baseUrl console.log($NODE_ENV); // console.log(process.env.NODE_ENV) let baseUrl = "/api/"; // let baseUrl = "http://10.109.4.141:8888/api/"; // 开发环境域名，直接访问地址，不走代理，如果是ip走代理 // 生产环境，不跨域，接口前缀/api // uat，跨域，后端重写地址，接口前缀/api if ($NODE_ENV ===
React 创建项目的基础
麦票的博客
07-19 1582
如何创建一个react项目 npm install -g create-react-app create-react-app my-app cd my-app npm start 关于webpack的一些基本命令和配置 首先我们需要初始化项目,npm init生成package.json文件 利用webpack构建工具,安装相应插件,运行npm install webpack webp...
react设置基础路由、修改打包路径
qq_35629054的博客
07-02 2433
设置基础路由 1.基础路由设置使用了 basename import React from 'react' import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom' import * as Login from '@pages/login' <Router basename = "/test"> <Switch> <Redir
react 配置环境变量
weixin_43294560的博客
07-07 1695
1、安装 cnpm install -D env-cmd 2、和src同级新建.env-cmdrc文件 { "dev":{ "PORT":"端口号", 启动端口 "REACT_APP_API_URL":"/xx" 公共api } } 3、修改package.json的"script": "start": "env-cmd -e dev xxx", 代码示例: { "dev":{ "PORT":"5050", "REAC
React 多环境运行打包配置(版本区分)（env）
Z_Wonderful的博客
10-21 4700
React 多环境运行打包配置(版本区分)
react项目中不同环境的环境变量引入
m0_48367310的博客
11-02 1747
使用create-react-app 生成一个项目， npm run eject 把配置文件暴露出来。 我们项目常常需要不同的环境使用不同的环境变量值，比如项目的api请求地址，一般都是开发 测试 生产，不同的环境有不同的=地址。此时比较方便的是写到环境变量中。 根据项目需要新建不同的环境变量文件： 在不同的环境变量文件中，写上环境变量不同的值。如何在文件中引用不同的换环境变量需要借助package.json文件 "scripts": { "start": "node scripts/start.js",.
关于NODE_ENV=production && npm run build模式的思考
https://syra-ti.icu
01-31 1744
关于NODE_ENV=production && npm run build模式的思考：看起来一段非常简单的构建命令，实际会出现一些问题...
env-cmd：从文件设置环境变量
02-04
环境命令 一个简单的节点程序，用于使用环境文件中的环境执行命令。 :floppy_disk: 安装 npm install env-cmd或npm install -g env-cmd :keyboard_selector: 基本用法 环境文件./.env # This is a comment ENV1=THANKS ENV2=FOR ALL ENV3=THE FISH Package.json { " scripts " : { " test " : " env-cmd mocha -R spec " } } 终奌站 ./node_modules/.bin/env-cmd node index.js 使用自定义环境文件路
Node.js中环境变量process.env的一些事详解
12-23
因为是前后端分离，所以在开发和部署的过程中会有对后端接口的域名的切换问题。折腾了一下午，查询了各种资料这才把这Node环境变量process.env给弄明白。 下面这就做个问题解决的记录。希望能对这个不明白的人有所...
VSCode配置react开发环境的步骤
08-28
本篇文章主要介绍了VSCode配置react开发环境的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在React框架中实现一些AngularJS中ng指令的例子
01-21
首先设定一段Angularjs代码的ng-class： ...  ...首先在state设置一个变量比如： isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面    <i className={header-help-icon></i
VSCode 配置React Native开发环境的方法
11-29
本文介绍了VSCode 配置React Native开发环境的方法，分享给大家，具体如下： 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上...
create-react-app修改配置多环境打包
songshu92的博客
08-14 7859
目录 修改配置 多环境配置 package.json demo如下： 测试 使用 参考资料，感谢以下同学： 修改配置 可以通过 npm runeject 命令将配置文件暴露出来，然后去修改里面的webpack配置 安装 react-app-rewired 包后，在根目录创建config-overrides.js 自定义配置，最后修改 package.jso...
React使用build生成项目：资源文件路径"/"修改为相对路径"."
热门推荐
amoxu
07-07 1万+
React使用build生成项目：资源文件路径"/"修改为相对路径"."React使用build生成项目：资源文件路径"/"修改为相对路径"."yarn build 指定相对路径拓展为任意构建环境定制环境变量帮助文档 React使用build生成项目：资源文件路径"/“修改为相对路径”." 一直想学习一个前端框架，看中react很久，最近终于对它下手了。在踩了js加载及渲染顺序的坑之后，发布也遇到...
env-cmd 从文件读取配置变量
weixin_34284188的博客
06-01 2992
npm install --registry=https://registry.npm.taobao.org -D env-cmd So.. 这样你在npm run build的时候会发现输出文件里面process.env.XXX被替换为配置文件里面对应的常量. build.ini NODE_ENV=production BACKEND_URL=foo.com package.json { "...
react入门之使用webpack搭配环境（一）
ddez46767的博客
08-14 131
react入门之搭配环境（一） 如果你想直接上手开发，而跳过这些搭配环境的繁琐过程，推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具，请确保你已经安装了node.js create-react-app my-app ...
关于creat-react-app中的环境变量
weixin_38267121的博客
05-16 1万+
    使用场景：在使用creat-react-app中开发项目中，项目中接口会分为两种情况一种是开发中的测试接口，一种是打包上线后的正式接口。那么怎么判断是开发模式还是线上模式（打包后的项目也就是npm run build）。    如果自己封装一个函数分别在 react-script中的start.js跟build.js中调用，传不同的两个参数回来，要么就是人性化的的方法每次打包的时候去手动改...
react配置环境变量
最新发布
04-28
在 React 中，可以通过在项目根目录下创建一个名为 `.env` 的文件来配置环境变量。在这个文件中，你可以定义任意多个环境变量，例如： ``` REACT_APP_API_KEY=your_api_key ``` 注意，所有的环境变量都需要以 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值