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'

效果:

相关推荐
liangshanbo12159 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦158811 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_11 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD11 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~12 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦158812 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫12 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo13 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li13 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐13 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine