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'

效果:

相关推荐
用户47949283569156 分钟前
告别span嵌套地狱:CSS Highlights API重新定义语法高亮
前端·javascript·css
无责任此方_修行中13 分钟前
一行代码的“法律陷阱”:开发者必须了解的开源许可证知识
前端·后端·开源
合作小小程序员小小店31 分钟前
web网页开发,在线物流管理系统,基于Idea,html,css,jQuery,jsp,java,SSM,mysql
java·前端·后端·spring·intellij-idea·web
GISer_Jing1 小时前
OSG底层从Texture读取Image实现:readImageFromCurrentTexture
前端·c++·3d
Charles_go2 小时前
C#8、有哪些访问修饰符
java·前端·c#
慧一居士2 小时前
Vue中 class 和 style 属性的区别对比
前端·vue.js
九章云极AladdinEdu2 小时前
项目分享|告别枯燥命令行,构建终端用户界面的 TypeScript 库
javascript·ui·typescript
oil欧哟3 小时前
文心 5.0 来了,百度大模型的破局之战
前端·人工智能·百度·prompt
东华帝君3 小时前
react 切片 和 优先级调度
前端
洞窝技术3 小时前
Next.js 不只是前端框架!我们用它搭了个发布中枢,让跨团队协作效率翻倍
前端·next.js