React如何配置env环境变量

news2024/11/24 9:56:37

React版本: "react": "^18.2.0"

1、在package.json平级目录下创建'.env'文件

2、在‘.env’文件里配置环境变量

【1】PUBLIC_URL

描述:编译时文件的base-href

官方描述:

// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const publicUrlOrPath = getPublicUrlOrPath(
  process.env.NODE_ENV === 'development',
  require(resolveApp('package.json')).homepage,
  process.env.PUBLIC_URL
);

配置方式:

PUBLIC_URL = '/zyk'

效果:

编译后的文件都增加了‘/zyk’前缀

 

【2】BUILD_PATH

描述:编译后文件夹名称,默认是‘build’

配置方式:

BUILD_PATH = 'dist'

效果:

 

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

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

相关文章

③ vue组件

vue组件创建 在App.vue中添加。 技巧&#xff1a;先import&#xff0c;把vue组件地址写出来。然后在template中写名字。剩下的就自动生成。要看下import有没有多生成什么。 注意1&#xff1a; 注意2&#xff1a; 不只是能在App.vue中引入组件。任意组件中都可以引用其他组件…

msvcp110.dll丢失怎样修复,msvcp110.dll丢失修复方法

msvcp110.dll是Microsoft C库的一部分&#xff0c;它是运行依赖于该库的程序所必需的动态链接库文件。它的作用是提供C运行时库函数的实现&#xff0c;这些函数用于处理程序的内存管理、异常处理、多线程支持等。当系统中缺少或损坏了msvcp110.dll文件时&#xff0c;请及时修复…

STM32--TIM定时器(1)

文章目录 TIM简介定时器类型 通用定时器预分频器时序计数器时序定时中断基本结构TIM内部中断工程TIM外部中断工程 TIM简介 STM32的TIM&#xff08;定时器&#xff09;是一种非常常用的外设&#xff0c;用于实现各种定时和计数功能。它是基于时钟信号进行计数&#xff0c;并在计…

Redis的单线程与多线程

Redis的核心处理逻辑一直都是单线程 有一些分支模块是多线程(某些异步流程从4.0开始用的多线程&#xff0c;例如UNLINK、FLUSHALL ASYNC、FLUSHDB ASYNC等非阻塞的删除操作。网络I/O解包从6.0开始用的是多线程;) 为什么是单线程 多线程多好啊可以利用多核优势 官方给的解释 …

二、编写第一个 Spring MVC 程序

文章目录 一、编写第一个 Spring MVC 程序 一、编写第一个 Spring MVC 程序 代码示例 创建 maven 项目&#xff0c;以此项目为父项目&#xff0c;在父项目的 pom.xml 中导入相关依赖 <dependencies><dependency><groupId>junit</groupId><artifactI…

阿里云ACP知识点

前言&#xff1a;记录ACP错题 1、在创建阿里云ECS时&#xff0c;每台服务器必须要包含_______用来存储操作系统和核心配置。 系统盘&#xff08;不是实例&#xff0c;实例是一个虚拟的计算环境&#xff0c;由CPU、内存、系统盘和运行的操作系统组成&#xff1b;ESC实例作为云…

web基础和tomcat的安装,部署jpress应用

目录 1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8&#xff0c;配置服务启动脚本&#xff0c;部署jpress应用。 1. 简述静态网页和动态网页的区别。 【1】定义区别 请求响应信息&#xff0c;发给客户端进行处理&#xff0c;由浏览…

81. 搜索旋转排序数组 II

题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 解题思路&#xff1a; 解法一&#xff1a;直接从前往后搜索&#xff0c;时间复杂度O(n) AC代码&#xff1a; class Solution {public boolean search(int[] nums, int target)…

在收藏夹里“积灰”的好东西——“收藏从未停止,行动从未开始”

方向一&#xff1a;分享一道你收藏的好题 小雅兰刚学数据结构与算法的时候&#xff0c;学的真的是很吃力&#xff0c;感觉链表真的特别的难&#xff0c;在学习了后面的知识之后&#xff0c;发现链表慢慢变得简单了&#xff0c;若是放在现在&#xff0c;小雅兰仍然觉得链表的知…

JProfiler —CPU评测

当JProfiler测量方法调用的执行时间及其调用堆栈时&#xff0c;我们称之为“CPU评测”。这些数据以多种方式呈现。根据你试图解决的问题&#xff0c;其中一个或另一个演示将是最有帮助的。默认情况下不会记录CPU数据&#xff0c;您必须打开CPU记录才能捕获有趣的用例。 一、调…

密码破解!字典攻击(C/C++代码实现)

字典攻击是一种通过系统地将字典中的每个单词作为密码输入&#xff0c;从而侵入受密码保护的计算机、网络或其他IT资源的方法。字典攻击也可以用于查找解密加密消息或文档所需的密钥。 字典攻击之所以有效&#xff0c;是因为许多计算机用户和企业坚持使用普通单词作为密码。这…

苏纷享首届生态人脉会成功举办,纷享销客助力伙伴共同发展

近日&#xff0c;纷享销客&苏纷享成功举办了首届生态人脉会&#xff0c;该活动于8月3日下午在苏州东方之门举行。本次会议汇聚了来自近20家企业的销售精英&#xff0c;包括金蝶、泛微、夏谷、蚂蚁分工、创享、黑湖智造等众多知名企业。会议秉持着“建立生态、共同发展、深耕…

软工导论知识框架(九)软件项目管理

通过计划、组织、控制一系列活动&#xff0c;合理配置使用资源&#xff0c;达到既定目标的活动。项目管理优先于任何技术之前&#xff0c;并且贯穿于整个软件生命周期全过程。 一.软件规模度量 1.代码行技术 估计每个功能需要源代码&#xff08;参考类似项目的历史数据&#…

论文详解 ——《SNR-Aware Low-light Image Enhancement》

文章目录 Abstract1.Introduction2. Related Work3. Our Method3.1 Long- and Short-range Branches3.2 SNR-based Spatially-varying Feature Fusion3.3 SNR-guided Attention in Transformer3.4 Loss Function 4. Experiments4.1. Datasets and Implementation Details4.2 Co…

实验二十七、电压传输特性的测量

一、题目 利用 Multisim 测试图1 所示各电路的电压传输特性。 图 1 电压比较器 图1\,\,电压比较器 图1电压比较器 二、仿真注意事项 &#xff08;1&#xff09;仿真电路所有的 A \textrm A A 均采用虚拟电压比较器。合理选择稳压管的限流电阻&#xff0c;使其既稳压又不至于…

armbian使用1panel快速部署部署springBoot项目后端

文章目录 前言环境准备实现步骤第一步&#xff1a;Armbian安装1panel第二步&#xff1a;安装数据库第三步&#xff1a;查看数据库容器重要信息【重要】查看容器所在的网络查看容器连接地址 第四步&#xff1a;项目配置和打包第五步:构建项目镜像 前言 这里只是简单记录部署spr…

开源,微信小程序 美食便签地图(FoodNoteMap)的设计与开发

目录 0 前言 1 美食便签地图简介 2 美食便签地图小程序端开发 2.1技术选型 2.2前端UI设计 2.3主页界面 2.4个人信息界面 2.5 添加美食界面 2.6美食便签界面 2.8 美食好友界面 2.9 美食圈子界面 2.10 子页面-店铺详情界面 2.11 后台数据缓存 2.12 订阅消息通知 2.1…

FastApi-1-结合sql 增/查demo

目录 FastAPI学习记录项目结构部分接口/代码展示感受全部代码 FastAPI学习记录 fastapi已经学习有一段时间&#xff0c;今天抽时间简单整理下。 官网介绍&#xff1a; FastAPI 是一个用于构建 API 的现代、快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;使用 Py…

配置容器以使其自动启动

配置容器以使其自动启动 配置容器 利用注册表服务器上的 rsyslog-custom-cert 镜像&#xff0c;创建一个名为 logserver 的容器。 将其配置为以 systemd 服务的形式运行&#xff0c;且仅面向现有用户 william 。 该服务应命名为 container-logserver , 并应在系统重新引…

每日一题——二叉树中和为某一值的路径

题目 给定一个二叉树root和一个值 sum &#xff0c;判断是否有从根节点到叶子节点的节点值之和等于 sum 的路径。 该题路径定义为从树的根结点开始往下一直到叶子结点所经过的结点叶子节点是指没有子节点的节点路径只能从父节点到子节点&#xff0c;不能从子节点到父节点总节点…