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'

效果:

相关推荐
堕落年代8 分钟前
Vue主流的状态保存框架对比
前端·javascript·vue.js
没资格抱怨10 分钟前
el-pagination的使用说明
javascript·vue.js·elementui
OpenTiny社区19 分钟前
TinyVue的DatePicker 组件支持日期面板单独使用啦!
前端·vue.js
冴羽20 分钟前
Svelte 最新中文文档教程(22)—— Svelte 5 迁移指南
前端·javascript·svelte
树上有只程序猿24 分钟前
Vue3组件通信:多个实战场景,轻松玩转复杂数据流!
前端·vue.js
青红光硫化黑29 分钟前
React基础之useEffect
javascript·react.js·ecmascript
剪刀石头布啊31 分钟前
css属性值计算过程
前端·css
bin915336 分钟前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14基础固定表头示例
前端·javascript·vue.js·ecmascript·deepseek
小华同学ai38 分钟前
吊打中文合成!这款开源语音神器效果炸裂,逼真到离谱!
前端·后端·github
二川bro43 分钟前
TensorFlow.js 全面解析:在浏览器中构建机器学习应用
javascript·机器学习·tensorflow