React V6分环境打包

news2024/10/4 11:38:13

功能背景

例如想要在react也要实现不同环境使用不同的api接口地址这样的想法,那么就需要根据命令自动区分环境了。

代码实现

比如我这又三种环境,那么创建三个文件,如图:在这里插入图片描述
分别是dev:开发环境,formal:UAT环境,prod:正式环境

env.dev

REACT_APP_BASE_URL=http://xxxxt/v1_0
REACT_APP_ENV=dev

env.formal

REACT_APP_BASE_URL=https://test.xxxxxx.com.cn
REACT_APP_ENV=formal

env.prod

REACT_APP_BASE_URL=https://prod.xxxxxx.com.cn
REACT_APP_ENV=prod

然后在package.json配置运行命令/打包命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "start:dev": "cross-env NODE_ENV=dev npm run start",
    "start:formal": "cross-env NODE_ENV=formal npm run start",
    "start:prod": "cross-env NODE_ENV=prod npm run start",
    "build:dev": "cross-env NODE_ENV=dev npm run build",
    "build:formal": "cross-env NODE_ENV=formal npm run build",
    "build:prod": "cross-env NODE_ENV=prod npm run build",
  },

运行项目之后,就可以打印以下

console.log('看看环境',process.env.REACT_APP_BASE_URL)

比如目前我运行的是npm run start:formal

在这里插入图片描述

注意:对于如何分环境运行不同的打包配置文件,这个还没研究,日后再弄,如果各位有分享可以粘贴评论区,一起学习。谢谢,有问题欢迎指正。

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

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

相关文章

【力扣】DP:1186. 删除一次得到子数组最大和

【力扣】DP:1186. 删除一次得到子数组最大和 文章目录 【力扣】DP:1186. 删除一次得到子数组最大和1. 题目描述2. 题解2.1 不可行2.2 DP 参考 1. 题目描述 给你一个整数数组,返回它的某个非空子数组(连续元素)在执行一…

画一个足球场,尺寸已标注好

画一个有标注的足球场 上面是一个带有标注的足球场俯视图,下面是实现代码。 import matplotlib.pyplot as plt from matplotlib.patches import Arc, Circle, Rectangle# 创建一个灰色背景的子图 fig, ax plt.subplots(facecolorgrey)# 设置x轴和y轴的范围 ax.set…

基于PaddleOCR的工件字符识别

目录 1.工业工件字符识别 1.2 难点 1.3 基于深度学习的OCR技术 2.基于Paddleocr的字符识别 🌟 特性 2.1 PP-OCRv3介绍 3.本文工件字符识别数据集介绍 4.PaddleOCR工件字符 4.1 字符检测 1.工业工件字符识别 在复杂的工业制造环境中,为了更好的追踪…

SAP-MM未清PO调取

SAP未清PO调取 SAP查询open PO(未清采购清单)可以通过ME2M(PO per material),ME2L(PO per vendor),ME2N(PO per document number)进行查询。 未清订单一般指未完成收货或者已收货未完成发票校验的订单,在输入以上任一事务代码之后,在选择参数Selection Parameters…

十二、项目总结

项目总结 B站直达【为尚硅谷点赞】: https://www.bilibili.com/video/BV1Ya411S7aT 本博文以课程相关为主发布,并且融入了自己的一些看法以及对学习过程中遇见的问题给出相关的解决方法。一起学习一起进步!!! 文章目录 项目总结1…

在 Jetpack Compose 中创建 Drawer

Jetpack Compose 是一个现代的构建 Android UI 的工具集,它使得构建 UI 变得更加简单快速。在本篇博客中,我们将讨论如何在 Jetpack Compose 中创建 Drawer,也就是我们常见的侧边抽屉。 什么是 Drawer? Drawer 是一个提供导航选项…

【C++学习】STL容器——string

一、STL简介 1.1 什么是STL STL(standard template libaray-标准模板库):是C标准库的重要组成部分,不仅是一个可复用的组件库,而且是一个包罗数据结构与算法的软件框架。 1.2 STL的版本 原始版本 Alexander Stepanov、Meng Lee 在惠普实验室…

java的final变量

Java在声明一个变量时,如果声明为final的,那么这个变量只能被赋值一次,赋值以后变量的值不能改变。 如果final变量指向一个对象的引用,对象的状态可以改变,但final变量始终指向同一对象的引用。 这个也规则也适用于数组…

第十八章 MobileViT网络详解

系列文章目录 第一章 AlexNet网络详解 第二章 VGG网络详解 第三章 GoogLeNet网络详解 第四章 ResNet网络详解 第五章 ResNeXt网络详解 第六章 MobileNetv1网络详解 第七章 MobileNetv2网络详解 第八章 MobileNetv3网络详解 第九章 ShuffleNetv1网络详解 第十章…

代码随想录算法训练营第五十一天

第一题、买卖股票的最佳时机含冷冻期 力扣题目链接 class Solution { public:int maxProfit(vector<int>& prices) {if(prices.size() 0) return 0;vector<vector<int>> dp(prices.size(), vector<int>(4, 0));dp[0][0] -prices[0];dp[0][1] d…

JVM GC ROOT分析与垃圾收集器原理分析(四)

目录 一、GC ROOT 1、虚拟机栈中的本地变量 2、static 成员 3、常量引用 4、本地方法栈中的变量 5、类加载器 6、线程 二、回收算法 1、标记和清除 2、复制算法 3、标记整理 三、垃圾收集器 1、新生代-复制算法 2、老年代-标记清除/整理 3、垃圾收集器分类 1、…

频数分析拟合优度卡方检验

一、案例介绍 某医学美容院对某年425位顾客抱怨原因进行了分析&#xff0c;结果见下表&#xff0c;现在想知道这四种抱怨原因的构成比是否有差异&#xff1f; 二、问题分析 本案例的分析目的是研究四种抱怨原因的构成比是否存在差异&#xff0c;抱怨原因为定类数据&#xff0…

Spring Boot 中的 EhCacheCacheManager 是什么,原理,如何使用

Spring Boot 中的 EhCacheCacheManager 是什么&#xff0c;原理&#xff0c;如何使用 前言 在现代化的应用程序中&#xff0c;缓存是提高性能的关键所在。缓存可以降低数据库的负载&#xff0c;提高响应速度&#xff0c;减少资源消耗。Spring Boot提供了多种缓存管理器&#…

结合GPS的SAT图道路识别

文章目录 2019 Leveraging Crowdsourced GPS Data for Road Extraction from Aerial Imagery基本介绍对GPS的使用关于怎么证明GPS信息有效How to render gps to imageGPS信息简介GPS点状特征GPS其他特征挖掘 可借鉴的点 2020 Convolutional Recurrent Network for Road Boundar…

《黑马头条》SpringBoot+SpringCloud+ Nacos等企业级微服务架构项目

环境搭建、SpringCloud微服务(注册发现、服务调用、网关) 1)课程对比 2)项目概述 2.1)能让你收获什么 2.2)项目课程大纲 2.3)项目概述 随着智能手机的普及&#xff0c;人们更加习惯于通过手机来看新闻。由于生活节奏的加快&#xff0c;很多人只能利用碎片时间来获取信息&#x…

红帽认证考试流程详解,让你少走弯路

参加红帽认证考试涉及以下三个流程 账号和证件的准备 1 RHN 账号注册 考试前需要您提前注册红帽帐号(RHN) 注册地址&#xff1a;https://www.redhat.com/wapps/ugc/register.html 注册时以下条目请重点注意&#xff1a; ▸ 账户类型选择 Personal ▸ 红帽账户登录名…

onnx修改模型节点【改变input的shape】

因为转onnx后模型的输入无法转rknn&#xff0c;所以要对onnx进行节点修改成左边 import onnx import onnx.helper as helper from onnx.helper import TensorProto import numpy as npmodel onnx.load(demo.change.onnx) #自己创建新的节点 ###############################…

【LeetCode热题100】打卡第29天:二叉树的层序遍历二叉树的最大深度

文章目录 【LeetCode热题100】打卡第29天&#xff1a;二叉树的层序遍历&二叉树的最大深度⛅前言 二叉树的层序遍历&#x1f512;题目&#x1f511;题解 二叉树的最大深度&#x1f512;题目&#x1f511;题解 【LeetCode热题100】打卡第29天&#xff1a;二叉树的层序遍历&am…

Stage模型HarmonyOS服务卡片开发ArkTS卡片相关模块

图1 ArkTS卡片相关模块 FormExtensionAbility&#xff1a;卡片扩展模块&#xff0c;提供卡片创建、销毁、刷新等生命周期回调。 FormExtensionContext&#xff1a;FormExtensionAbility的上下文环境&#xff0c;提供FormExtensionAbility具有的接口和能力。 formProvider&…

CASAIM三维扫描仪在运动防护的应用高端运动器材设计定制器材头盔

CASAIM三维扫描技术在运动防护领域有广泛的应用&#xff0c;可以帮助设计和生产高端运动器材&#xff0c;检测运动器材适配性&#xff0c;以提供更好的运动防护。 CASAIM三维扫描仪可以将运动员的身体尺寸和形状精确地捕捉下来&#xff0c;以便制造出符合其个人需求的定制化器…