React如何配置env环境变量

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

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

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

【1】PUBLIC_URL

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

官方描述:

javascript 复制代码
// 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
);

配置方式:

bash 复制代码
PUBLIC_URL = '/zyk'

效果:

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

【2】BUILD_PATH

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

配置方式:

bash 复制代码
BUILD_PATH = 'dist'

效果:

相关推荐
IT乐手8 分钟前
Claude Code + Qwen 的配置方法
javascript·claude
前端程序媛-Tian29 分钟前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技31 分钟前
Ant Design Pro v6.0.0 发布
前端
T畅N1 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer1 小时前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端
IT_陈寒1 小时前
Redis这个内存杀手,差点让我们运维半夜追杀我
前端·人工智能·后端
子兮曰2 小时前
DeepSeek TUI:原生 Rust 打造的终端 AI 编码 Agent
前端·javascript·后端
暗不需求2 小时前
# 深入 React Todos:从零实现一个状态提升与本地持久化的待办应用
javascript·react.js·全栈
DFT计算杂谈2 小时前
自动化脚本一键绘制三元化合物相图
java·运维·服务器·开发语言·前端·python·自动化
子兮曰2 小时前
深入 Superpowers:180k Stars 的开源 AI 编程方法论是如何工作的
前端·javascript·后端