Create React App 开发利器清单：环境变量、API 代理与自定义端口的 10 个实用技巧-北京尧图网络

Create React App 开发利器清单环境变量、API 代理与自定义端口的 10 个实用技巧【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-appCreate React AppCRA是 React 前端项目最经典的一键脚手架一条命令即可搭建现代化 Web 应用。而它的环境变量、API 代理、自定义端口三大能力是新手从能跑起来到高效开发的必经之路。本文精选10 个实用技巧帮你快速掌握 CRA 开发服务器的核心玩法这些能力都由 react-scripts 这个核心构建包提供。环境变量与 API 代理功能分别要求react-scripts0.2.3及以上版本建议保持依赖版本较新一、环境变量用 REACT_APP_ 前缀打通配置CRA 生成的项目是静态的 HTML/CSS/JS 包环境变量在构建时就会嵌入无法运行时读取。理解这一点是玩转所有变量技巧的前提。技巧 1自定义变量必须以 REACT_APP_ 开头在代码中通过process.env.REACT_APP_XXX即可读取以REACT_APP_为前缀的变量。其他前缀的变量NODE_ENV除外会被直接忽略——这是为了避免误暴露机器上的敏感密钥属于安全设计。技巧 2用 .env 文件持久化变量掌握加载优先级在项目根目录创建.env文件即可永久生效CRA 实际支持一整套文件体系左侧文件优先级高于右侧命令加载顺序高 → 低npm start.env.development.local→.env.local→.env.development→.envnpm run build.env.production.local→.env.local→.env.production→.envnpm test.env.test.local→.env.test→.env新手常踩的坑修改任何.env文件后必须重启开发服务器才能生效。.env.local等本地覆盖文件建议加入.gitignore而.env本身通常应该提交到版本库。技巧 3用 Shell 临时注入变量不改任何文件不想动文件时可以在启动前临时设置变量以 Linux/macOS 为例REACT_APP_API_URLhttp://staging.example.com npm startWindows (cmd) 下则是set REACT_APP_API_URL... npm start。适合临时切换测试环境。技巧 4NODE_ENV 自动切换条件代码剔除NODE_ENV是内置变量且不可手动覆盖npm start时为developmentnpm test为testnpm run build为production。if (process.env.NODE_ENV ! production) { analytics.disable(); // 生产构建时这行代码会被自动剔除 }生产构建的压缩步骤会把这种条件块整体移除让你的打包产物更干净、更小。技巧 5.env 内变量可以互相引用展开.env支持 dotenv-expand 语法react-scripts1.1.0一行配置多处复用DOMAINwww.example.com REACT_APP_API$DOMAIN/api也可以在 public/index.html 中用%REACT_APP_XXX%的形式引用变量例如动态设置页面title。安全提醒千万不要把 API 私钥、密码等机密写进 React 应用的环境变量——它们会被打包进产物任何人都能查看到完整说明见官方文档adding-custom-environment-variables.md二、API 代理让前后端联调告别 CORS生产环境中前端和后端常部署在同一域名下开发时后端却在另一个端口。CRA 的代理机制让fetch(/api/todos)这样的相对路径请求无缝工作。技巧 6package.json 里加一行 proxy 即可{ proxy: http://localhost:4000 }设置后开发服务器会把所有它不认识的请求非静态资源转发到http://localhost:4000彻底绕过 CORS 报错且支持 HTTP、HTTPS 和 WebSocket。⚠️ 注意proxy仅在开发模式npm start生效生产环境需要你自己保证路径指向正确的服务。技巧 7用 setupProxy.js 做多路由的精细代理一个proxy字段不够灵活时可安装http-proxy-middleware并创建 src/setupProxy.jsmodule.exports function (app) { app.use(/api, createProxyMiddleware({ target: http://localhost:5000, changeOrigin: true, })); };该文件无需在任何地方导入启动开发服务器时自动注册可以为不同路径配置不同后端。注意此文件只支持 Node 原生 JavaScript 语法Flow、ES Modules 不行。技巧 8远程开发遇到 Invalid Host Header用 HOST 解决开启 proxy 后安全机制会启用更严格的 Host 检查。远程开发时若看到Invalid Host Header报错在项目根目录的.env.development中声明你的公网开发域名即可HOSTmypublicdevhost.com完整文档proxying-api-requests-in-development.md三、自定义端口与开发服务器调优技巧 9用 PORT 变量自定义端口冲突时自动换端口开发服务器默认监听3000端口见 start.js 中的DEFAULT_PORT。两种改法Shell 临时指定PORT4000 npm start.env持久指定写入PORT4000更贴心的是即使不手动设置当 3000 端口被占用时CRA 的choosePort机制也会自动提示你切换到下一个可用端口不会让端口冲突打断开发节奏。技巧 10一张表搞定 HOST、HTTPS 等高级调优变量除REACT_APP_自定义变量外CRA 还支持一批无需前缀的调优变量详细清单见 advanced-configuration.md变量作用HOST指定开发服务器绑定的主机名HTTPStrue以 HTTPS 模式运行开发服务器BROWSER指定启动哪个浏览器设为none则不自动打开WDS_SOCKET_*定制热更新 WebSocket 参数同时开多个 CRA 项目时必备CItrue把警告当作构建失败处理CI 平台通常默认开启GENERATE_SOURCEMAPfalse关闭生产构建的 source map缓解小内存机器 OOMPUBLIC_URL强制资源按指定 URL 加载配合 CDN 部署使用补充一点如果你的应用部署在子路径下可在package.json中配置homepage字段设为.可启用相对路径打包CRA 会用它生成正确的资源地址逻辑实现见 getPublicUrlOrPath.js部署细节参考 deployment.md。总结场景一行记住自定义配置变量名加REACT_APP_前缀改完.env记得重启前后端联调package.json加proxy复杂路由用setupProxy.js端口与调优PORT、HOST、HTTPS等变量无需前缀直接生效掌握这 10 个技巧你就把 Create React App 开发服务器的核心能力用尽了——在需要更深定制时再考虑 eject 或迁移到现代构建工具也不迟。祝开发顺利 ✨【免费下载链接】create-react-appSet up a modern web app by running one command.项目地址: https://gitcode.com/gh_mirrors/cr/create-react-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Create React App 开发利器清单：环境变量、API 代理与自定义端口的 10 个实用技巧

相关推荐

cheat.sh 隐身模式（Stealth Mode）实战：鼠标选中文字即刻弹出代码答案

2026前端零基础就业：268集HTML5+CSS3+JS系统视频课

红米K100系列钢化膜选购指南：避开型号陷阱，看懂参数与贴膜技巧

更多资讯

SSRF漏洞实战指南：协议绕过、内网探测与WAF突破

AI听声辨位技术：原理、实现与应用场景

强化学习在医疗影像标注中的应用与优化

基础算法专项训练：高效刷题方法与实战解析

达梦数据库核心技术解析与应用实践

信号与系统知识地图：三层响应驱动的时频域分析框架

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？