react项目中统一处理 baseURL ， 利用脚手架的环境变量

最新推荐文章于 2023-01-08 23:09:36 发布
最新推荐文章于 2023-01-08 23:09:36 发布
阅读量4.2k 收藏 1
点赞数 3
分类专栏： react 文章标签： 前端 javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Web_workstart/article/details/106095159
版权
本文介绍了如何在React项目中通过创建.env.development文件来设定生产环境变量，以统一处理baseURL。在utils文件夹下创建了url.js和api.js，用于管理和调用API。在需要发送axios请求或拼接图片URL的页面，可以引入这些配置，启动项目时需重新运行`npm start`。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 根目录下(与src平级) 新建生产环境变量文件 .env.development
REACT_APP_URL = http://localhost:8080
  1. 在utils文件夹下 创建url.js 和 api.js文件
    url.js文件：
export const BASE_URL = process.env.REACT_APP_URL

    api.js文件：

import</
最低0.47元/天 解锁文章
使用Webpack搭建React脚手架（上篇）
UI_linlan的博客
12-24 616
通过使用Create React App来搭建React脚手架，我们可以快速创建一个新的React项目，并且集成了一些常用的开发工具和库。通过构建生产版本，我们可以生成一个优化后的、可部署的应用。搭建React脚手架是开发React应用的重要一步，它可以帮助我们快速初始化项目结构，并且集成一些常用的开发工具和库，提高开发效率。这将启动一个本地开发服务器，并自动在浏览器中打开一个新的标签页，显示你的React应用。CRA提供了一些默认的配置，但你也可以根据需要对项目进行定制。文件来定制你的应用。
【webpack逐步构建React项目详细解析版】
weixin_56048772的博客
01-10 349
构建React项目一般分为脚手架构建的方式和webpack逐步构建的方式，本期就是对webpack一步一步构建项目进行逐步详细讲解。
react下设置baseUrl
ylovd的博客
10-09 2353
react中统一处理baseurl
React配置baseUrl
m0_67284286的博客
01-08 829
进入脚手架中,打开src下的index.js入口，引入axios import axios from 'axios'设置axios默认请求地址 例如我暂时写的项目 axios.defaults.baseURL = `在react脚手架中下载axios 命令为npm i axios。在需要的地方直接发起请求。
react base
weixin_34363171的博客
03-25 614
react16的新特性有哪些？ 1，类似try catch ErrorBoundary render(){ return ( <div> <ErrorBoundary> <Profile user={this.state.user} /> </ErrorBou...
【译】在 React 中处理状态的替代方法：URL
weixin_34050389的博客
06-02 542
原文：An alternative to handle state in React: the URL !作者：GaelS译者：博轩React App 中的状态如何在 React App 中管理全局状态，是所有类库之间一直争论不休的事情。然而，依我拙见，我们使用 URL 和 react-router 也可以做同样的事情。URL的胜利（FTW）在单页面应用中，URL 并不重要。大多数情况下，它只是一...
react项目路由的统一配置
yangyanqin2545的博客
08-21 845
react项目路由的统一配置
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
从零搭建一个Vite-react脚手架(附源码)
petertanjinjie的博客
07-30 995
写在开头（边听歌边看效果更佳）在之前，已经很多朋友已经升级到了vite,但是大部分都是vue的项目，那么今天我们把之前webpack的react项目升级到vite!为此，为了让大家少踩坑，...
react获取地址栏_react组件 如何获取URL 参数
weixin_39702316的博客
12-23 523
//客户端index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'import reg...
解决react中在webpack下引用路径的问题--图片；：最终只能通过把文件拷贝一份到build目录下才行
qq_39047764的博客
07-06 2154
1：直接在div里面： &lt;img src="/img/1.jpg"/&gt;   前面不带点是可以的；2：                   let mg=require("./img/1.jpg")       这个地址无论如何都有问题                                &lt;img src={mg}/&gt;                        ...
react webpack配置组件路径引用 @与自定义
Z_Wonderful的博客
11-22 1850
暴露配置文件： create-react-app 生成的项目看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令 npm run eject 修改配置文件： webpack.config.js //把一个路径或路径片段的序列解析为一个绝对路径 path.resolve(__dirname, '../') // 静态储存当前目录绝对路径 __dirname：目录名 const staticRootDir = path.resolve(__dirname, '../'); reso
react配置生产环境和测试环境地址
红岸基地
04-29 4075
写在前面 之前一直写关于vue的文章，经常看我文章的可能从上篇文章就知道了我已经不写vue了，以后就写react了，会持续更新，今天说一下我搭建框架的时候配置不同环境的步骤，大家可以借鉴以下，也可以自己搞一下！ 在项目根目录创建两个环境文件 .env.development .env.production 文件内容 .env.developemnt REACT_APP_BASE_URL = 'https://test.com' REACT_APP_ENV = 'development' .e
在react项目中使用环境变量优化axios配置
cyj5201314的博客
06-10 210
环境变量设置
React开发总结篇---配置文件请求
layxing27的博客
04-29 699
问题：项目的请求地址，存于电脑（服务器）的系统环境变量中，项目启动的时候，使用电脑中的请求地址？ 答：修改项目的配置文件 项目描述 （1）项目已经开发完成，要求动态获取环境变量中的请求地址 （2）使用git管理仓库 （3）没有执行过命令eject（注意此操作不可逆） 1 操作 1.1 刷新代码 $ git add . git commit -m "运行eject" 2.1 执行eject操作 yarn run eject 将会多出两个文件夹（配置文件） 1.3 删除node_modules.
react http请求_三分钟教你搞定 React 项目多环境配置
weixin_39959615的博客
10-27 1239
在实际项目开发中，前端 er 常常会面对多个环境的接口：开发环境、测试环境、生产环境，所以项目中网络请求的 baseUrl也需要跟随这些环境来变化。但是，我们一般会使用像 create-react-app或者 umi这样的脚手架来做项目的初始化，这些脚手架将 webpack 的配置黑盒化了，如何在不执行 eject 操作的前提下优雅地配置多个项目环境呢？ 在项目中最好不要一遇到问题就一键执行 e...
react多个网络请求_React 中请求远程数据的四种方法
weixin_39949607的博客
12-19 813
react是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过HTTP请求数据并将其发送到Web API，可以考虑下面四种方法。内联写法集中管理自定义Hookreact-query/swr注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之...
React 中请求远程数据的四种方法
前端劝退师
07-23 1453
React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。内联写法集中管理自定义 Hook...
react.js 之 create-react-app 命令行工具系统讲解
hahahhahahahha123456的博客
06-29 660
react.js 教程之 create-react-app 命令行工具系统讲解快速开始npm install -g create-react-app create-react-app my-app cd my-app/ npm start 通过http://localhost:3000/查看你的app 使用 npm run build 编译打包程序 npm test 文件修改后测试，这部分内容后面...
react 脚手架 配置请求地址
最新发布
03-04
### 配置 Create-React-App 的 API 请求基础 URL 为了在 `create-react-app` 中配置 API 请求的基础 URL，在项目结构中的 `src/utils` 文件夹下创建一个新的 TypeScript 文件 `request.ts`。此文件用于封装 Axios 实例以便统一管理 HTTP 请求。 ```typescript import axios from 'axios'; // 创建 axios 实例并设定全局参数 const instance = axios.create({ baseURL: '/api', // 设置API的基础路径 timeout: 1000 * 60 * 10 // 定义请求的最大等待时间为十分钟 }); // 添加请求拦截器，可以在每次发起HTTP请求前处理一些逻辑，比如添加认证令牌 instance.interceptors.request.use( config => { // 所有请求开始之前可以在此处执行额外的操作，例如设置 token 或者日志记录 return config; }, error => Promise.reject(error) ); // 添加响应拦截器来处理返回的数据或错误情况 instance.interceptors.response.use( response => response.data, error => Promise.reject(error) ); export default instance; // 导出自定义的Axios实例供其他模块调用[^1] ``` 对于跨域问题，可以通过配置代理解决。这涉及到在项目的根目录下的 `package.json` 文件内调整启动命令，并且在同一级别建立名为 `.env` 的环境变量文件指定 `REACT_APP_API_PROXY=http://yourserver.com` 来间接影响 `setupProxy.js` 中的目标地址[^2]。 另外一种方法是在 `src` 下新增加一个叫做 `setupProxy.js` 的文件（注意不是其它名称），该文件用来配置 Webpack Dev Server 使用 http-proxy-middleware 库来进行反向代理： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use(createProxyMiddleware('/api',{ target: process.env.REACT_APP_API_PROXY || 'http://localhost:4000', changeOrigin: true, pathRewrite: {'^/api': ''} })); }; ``` 这样做的好处是可以让前端开发人员不必担心后端服务的实际位置，只需要按照 `/api` 开头的方式来构建所有的 RESTful 路径即可[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值