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

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

 1. 下载依赖:

npm install dotenv
npm install dotenv-expandnpm 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.mzph.cn/bicheng/12033.shtml

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

相关文章

群晖 Synology DSM7 过热关机解决方法

最近已经提示我过热关机过两次了,这两次一次是用虚拟机,一次是批量使用Synology Photos批量上传照片: 但是我没有对主机进行任何的位置移动以及硬件修改操作,散热环境没有发生变化。以前使用从来没有出现过这个问题,同…

Mysql 创建索引

1. 在创建表时添加索引 在使用CREATE TABLE语句创建表的同时,可以直接定义索引。例如,创建一个包含索引的表: CREATE TABLE clothes (id INT PRIMARY KEY,c_brand VARCHAR(100),c_type VARCHAR(50),c_size VARCHAR(10),price DECIMAL(10, 2…

Android UI: 动画:属性动画

文章目录 定义两种创建方式 代码:直接创建Animator对象XML:加载xml文件API 类操作源码分析总结定义 一段时间内,属性值从A变化到B 属性可以是任何类的任何属性 两种创建方式 代码:直接创建Animator对象 XML:加载xml文件 xml文件在res/anim/目录下,使用R.anim.xxx获…

聚水潭和金蝶云星空单据接口对接

聚水潭和金蝶云星空单据接口对接 对接系统:金蝶云星空 金蝶K/3Cloud(金蝶云星空)是移动互联网时代的新型ERP,是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”,旨在帮助企业打造…

[力扣题解]122. 买卖股票的最佳时机 II

题目:122. 买卖股票的最佳时机 II 思路 贪心法; 计算出利润数组(后一天卖出的钱-前一天买进的钱),把原问题转换为选择所有正利润的操作; 分解:想到最终利润可以分解,分解为每天的利…

GoogleGemini-AI预测2024系统分析师论文

Message From You: 系统分析师是全国计算机职业资格与水平考试高级别的一类考试,结合历年的论文考试题目以及当前流行的系统分析方便的问题。你能否预测几个2024年可能的论文题目? Message From ChatGPT: 2024 年系统分析师论文题目预测 基于云计算的…

自集成式 HTTP 代理方案

前言 大部分程序员,想必都会有一个常用的抓包代理工具; 但在座的各位,可曾见过这样一款集成在 Web 应用中的代理工具? ​,时长00:45 它是明显区别于传统代理工具的,有以下特性: 零安装、零配…

解析流中 apts 与 vpts的分布

流中 apts 与 vpts的分布情况,同时使用图显示出来 一,最好的方式是使用EasyICE 来查看,这个自动化工具是很好用的: 二, 当EasyICE不能打出理想的数据的时候,可以自己来提取数据,画出对应的图&a…

tomcat--安装

官网:Apache Tomcat - Welcome! 官网文档:Apache Tomcat 8 (8.5.100) - Documentation Index 帮助文档:Apache Tomcat Home - Apache Tomcat - Apache Software Foundation FAQ - Apache Tomcat - Apache Software Foundation yum安装 查…

OpenNJet:引领下一代云原生应用引擎

文章目录 一、前言二、什么是OpenNJet 应用引擎三、OpenNJet的优势3.1 性能无损动态配置3.2 灵活的CoPilot框架3.3 支持HTTP/33.4 支持国密3.5 企业级应用3.6 高效安全 四、centos 安装4.1 生成njet.repo4.2 更新yum 缓存4.3 安装 njet 或 njet-otel 五、OpenNJet配置与部署5.1…

岩土工程监测仪器之一:振弦采集仪的工作原理解析

岩土工程监测仪器之一:振弦采集仪的工作原理解析 河北稳控科技振弦采集仪是岩土工程监测中常用的一种仪器,用于测量地面、结构物或其他物体的振动情况。它通过感应振弦的振动来获取相关的数据,进而分析和评估土壤、地基或结构物的稳定性和安…

用户登录认证和权限授权(SpringSecurity、JWT、session)

文章目录 前言一、登录认证1. 问题引入2. Session2.1 实现原理2.2 过滤器Filter2.3 上下文对象 3. JWT3.2 实现步骤3.3 拦截器 HandlerInterceptorAdapter3.4 上下文对象 4. Session VS JWT 二、权限授权1. 权限类型1.1 页面权限(菜单项权限)1.2 ACL模型…

牛客热题:二叉树的前序遍历

📟作者主页:慢热的陕西人 🌴专栏链接:力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 文章目录 牛客热题:二叉树的前序遍历题目链接方法一…

灵卡科技HDMI音视频采集及H.264编码一体化采集卡—LCC260

推荐一款由灵卡科技倾力打造的高品质HDMI音视频采集卡——LCC260。以创新的技术,精湛的工艺和卓越的性能,为您提供全方位的音视频解决方案。 LCC260是一款集HDMI音视频采集与H.264编码于一身的全功能采集卡。它的输入端配备了最先进的HDMI 1.4a标准接口&…

tab 滑动小案例

效果&#xff1a; 代码&#xff1a; <template><view class"content"><view class"tab"><view v-for"(item,index) in dataList" :key"index" class"tab_item" click"slideTab(index)">…

mediapipe 导出dll

// HolisticTrackingApi.h#ifndef HOLISTIC_TRACKING_API_H #define HOLISTIC_TRACKING_API_H#define EXPORT#include <malloc.h> #include <vector> #include "HolisticTrackingDetect.h" // 添加这一行#ifdef _WIN32 #ifdef EXPORT #define EXPORT_AP…

《行列视》的优势您了解多少?

《行列视》定位于生产制造型企业的生产过程数据应用分析领域&#xff0c;主要解决 生产过程实时、历史数据与生产管理所需要的管理指标之间的统计、计算问题&#xff0c; 以及基于生产过程数据和管理指标的各种日常工作、管理、和经营的业务应用自 助建设问题。它自身的优势…

Blender小记

快捷键 G 移动模型(长按Ctrl令模型逐网格移动) S 缩放模型 R 旋转模型 点击X Y Z可让模型沿XYZ轴改变, 默认为当前坐标系, 再次点击切换坐标系(全局坐标/局部坐标) Alt G/S/R 撤销改变 缩放时, Shift X/Y/Z可令X/Y/Z方向不受影响 缩放时, S X/Y/Z 0可让被选中项沿该轴垂直…

简单有效的数据加密方法你知道几个?

1. 文件和邮件加密 利用华企盾DSC数据防泄密系统&#xff0c;企业可以实现文件和邮件的加密。系统提供了一键式的文件加密解决方案&#xff0c;确保敏感信息在电子邮件中传输时得到安全保护&#xff0c;即使邮件被截获&#xff0c;内容也无法被未授权人员阅读。 2. 端到端数据…

vue中中文汉字转拼音的小工具

使用 <script> import pinyin from /utils/pinyinexport default {name: "",data() {return {。。。}},created() {this.test()},methods: {test() {let l1 拼音转汉字;console.log(pinyin.chineseToPinYin(l1))}, 组件 export const pinyin {a: \u554a\u963…