React脚手架,配置环境变量(生产模式,开发模式)

news2025/1/23 3:51:04

项目搭建方式:react脚手架(create-react-app)

 1. 下载依赖:

npm install dotenv
npm install dotenv-expand

npm install dotenv-cli -S

2.配置环境变量:

项目根部录下创建文件.env     .env.pro     .env.dev

配置package.json  - scripts,添加:

 "start:dev": "dotenv -e .env.dev react-scripts start"

 "start:pro": "dotenv -e .env.pro react-scripts start"

默认配置:

配置开发环境变量:

配置生产环境变量:

使用process.env.REACT_APP_BASEURL拿到环境变量:

3.启动环境:

默认启动:npm run start

开发模式:npm run start:dev

生产模式:npm run start:pro

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1673540.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[Java EE] 多线程(九):JUC剩余部分与线程安全的集合类(多线程完结)

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏:🍕 Collection与数据结构 (91平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 🧀Java …

视频短信时代来临!发送前必知的四大关键要素

随着移动通信技术的迅猛发展,视频短信作为全新的沟通方式,正逐渐融入我们的日常生活。作为行业的先行者,邦之信已率先推出视频短信业务,并获得了市场的广泛认可。 那么,在发送视频短信时,我们需要注意哪些关…

【循环程序设计-谭浩强适配】(适合专升本、考研)

无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 完整资料如下:纯干货、纯干货、纯干货!!…

启动项目时出现SELinux is preventing

问题描述 启动项目时出现SELinux is preventing**** SELinux正在阻止systemd对文件AB.sevice进行读取访问。 我的是启zabbix是报该错: 最终解决方案 方法一:暂时禁用SELinux setenforce 0 方法二:禁用SELinux 在配置文件/etc/sysconfig/…

【LeetCode】每日一题 2024_5_14 完成所有任务需要的最少轮数(哈希)

文章目录 LeetCode?启动!!!题目:完成所有任务需要的最少轮数题目描述代码与解题思路 每天进步一点点 LeetCode?启动!!! 题目:完成所有任务需要的最少轮数 题…

酒店前台装智能酒精壁炉前和装后对比

在酒店前台装智能酒精壁炉之前和之后,前台区域的氛围和效果会有显著的对比: 装智能酒精壁炉之前 传统或简约风格: 在壁炉安装之前,前台可能具有传统或简约的设计风格,可能缺乏独特的装饰元素或焦点。前台区域可能显…

OrangePi Zero2 全志H616开发学习文档、基础IO蜂鸣器、超声波测距、舵机PWM基础开发

一.平台介绍 OrangePi开发板不仅仅是一款消费品,同时也是给任何想用技术来进行创作创新的人设计的。它是一款简单、有趣、实用的工具,你可以用它去打造你身边的世界。 特性 CPU 全志H616四核64位1.5GHz高性能Cortex-A53处理器GPU MaliG31MP2 Supports…

LeetCode—用栈实现队列

1.题目 2.思路—双栈 思路与双队列实现栈类似: 将一个栈当作输入栈,用于压入push传入的数据;另一个栈当作输出栈,用于pop和peek操作。 每次 pop或 peek时,若输出栈outStack为空则将输入栈inStack的全部数据依次出栈并…

前端笔记-day06

文章目录 01-浮动-基本使用02-浮动-产品布局03-浮动-清除浮动带来的影响04-清除浮动-额外标签法05-清除浮动-单伪元素法06-清除浮动-双伪元素法单伪元素和双伪元素CSS 07-清除浮动-overflow08-flex布局-体验09-flex布局-组成10-flex布局-主轴对齐方式11-flex布局-侧轴对齐方式1…

如何用Rust获取CPU、内存、硬盘的信息?

目录 一、用Rust获取CPU、内存、硬盘的信息 二、知识点 systemstat 一、用Rust获取CPU、内存、硬盘的信息 首先,需要添加systemstat库到Cargo.toml文件: [dependencies] systemstat "0.2.3" 在Rust代码中使用它: extern crat…

400元已到账,成交从认真开始

昨天发了一个值班的需求,收到了很多好友的响应,这里非常感谢关注创业程序员卡酷的老朋友、新朋友。今天分享一下:拓展、合作、成交 现在不管是IT行业还是其他行业,大环境可谓一片惨淡,35乃至30找不到工作的失业人员一抓…

el-table 多级表头 列添加fixed=left 列错乱

如图错乱显示 添加 this.$refs.tableList.doLayout();

Linux 操作系统多路IO复用

1.多路IO复用 多路I/O复用是通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作。 这个机制能够通过select/poll/eroll等来使用。这些函数都可以同时监视多…

答辩PPT框架如何搭建?文心一言AI辅助构建

很多快要毕业的同学在做答辩PPT的时候总是感觉毫无思路,一窍不通。但这并不是你们的错,对于平时没接触过相关方面,第一次搞答辩PPT的人来说,这是很正常的一件事。一个好的答辩PPT可以根据以下分为以下几部分来写。 1.研究的背景和…

数据可视化(九):Pandas北京租房数据分析——房源特征绘图、箱线图、动态可视化等高级操作

Tips:"分享是快乐的源泉💧,在我的博客里,不仅有知识的海洋🌊,还有满满的正能量加持💪,快来和我一起分享这份快乐吧😊! 喜欢我的博客的话,记得…

数据可视化(十一):Pandas餐饮信息表分析——交叉表、离群点分析,多维分析等高级操作

Tips:"分享是快乐的源泉💧,在我的博客里,不仅有知识的海洋🌊,还有满满的正能量加持💪,快来和我一起分享这份快乐吧😊! 喜欢我的博客的话,记得…

简述RocketMQ系统架构及其相关概念

一、概述 RocketMQ是一款高性能、高吞吐量的分布式消息队列系统,它采用了分布式架构,支持多生产者和消费者并发读写,具有高可用性、高吞吐量、低延迟等特点。本文将对RocketMQ的系统架构进行详细解析。 二、架构设计 RocketMQ采用了分布式架…

AI如何改变PPT制作流程?推荐四款ai生成ppt工具

提起PPT,大家的第一反应就是痛苦。经常接触PPT的学生党和打工人,光看到这3个字母,就已经开始头痛了: 1、PPT内容框架与文案挑战重重,任务艰巨,耗费大量精力。 2、PPT的排版技能要求高,并非易事…

ATA-4315高压功率放大器在高频理疗仪驱动中的应用

现代社会,面对生活压力、工作压力,再加上不良的生活习惯,难免身体会出现这样或那样的问题,随着科技的发展,我们除了来到医院进行具体的治疗,一些可以用来辅助医生进行治疗的仪器设备也越来越多的应用到了临…

JavaScript 对象入门:基础用法全解析

目录 对象 语法 属性和访问 方法和调用 this关键字 null 遍历对象 内置对象 Math 属性 方法 Date 创建日期对象 获取和设置日期 ⭐对象 对象是 JavaScript 数据类型的一种,数据类型也包括数值类型、字符串类型、布尔类型、undefined。对象数据类型可…