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

最新推荐文章于 2024-06-19 15:53:07 发布
最新推荐文章于 2024-06-19 15:53:07 发布
阅读量4k 收藏 1
点赞数 3
分类专栏： react 文章标签： 前端 javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Web_workstart/article/details/106095159
版权
本文介绍了如何在React项目中通过创建.env.development文件来设定生产环境变量，以统一处理baseURL。在utils文件夹下创建了url.js和api.js，用于管理和调用API。在需要发送axios请求或拼接图片URL的页面，可以引入这些配置，启动项目时需重新运行`npm start`。
摘要由CSDN通过智能技术生成
  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元/天 解锁文章
Web_workstart
关注
专栏目录
使用Webpack搭建React脚手架（上篇）
UI_linlan的博客
12-24 511
通过使用Create React App来搭建React脚手架，我们可以快速创建一个新的React项目，并且集成了一些常用的开发工具和库。通过构建生产版本，我们可以生成一个优化后的、可部署的应用。搭建React脚手架是开发React应用的重要一步，它可以帮助我们快速初始化项目结构，并且集成一些常用的开发工具和库，提高开发效率。这将启动一个本地开发服务器，并自动在浏览器中打开一个新的标签页，显示你的React应用。CRA提供了一些默认的配置，但你也可以根据需要对项目进行定制。文件来定制你的应用。
react下设置baseUrl
ylovd的博客
10-09 2060
react中统一处理baseurl
React配置baseUrl
m0_67284286的博客
01-08 679
进入脚手架中,打开src下的index.js入口，引入axios import axios from 'axios'设置axios默认请求地址 例如我暂时写的项目 axios.defaults.baseURL = `在react脚手架中下载axios 命令为npm i axios。在需要的地方直接发起请求。
获取BASE_URL
最新发布
LJJONESEED的博客
06-19 160
【代码】获取BASE_URL。
react base
weixin_34363171的博客
03-25 568
react16的新特性有哪些？ 1，类似try catch ErrorBoundary render(){ return ( <div> <ErrorBoundary> <Profile user={this.state.user} /> </ErrorBou...
【译】在 React 中处理状态的替代方法：URL
weixin_34050389的博客
06-02 514
原文：An alternative to handle state in React: the URL !作者：GaelS译者：博轩React App 中的状态如何在 React App 中管理全局状态，是所有类库之间一直争论不休的事情。然而，依我拙见，我们使用 URL 和 react-router 也可以做同样的事情。URL的胜利（FTW）在单页面应用中，URL 并不重要。大多数情况下，它只是一...
react项目路由的统一配置
yangyanqin2545的博客
08-21 773
react项目路由的统一配置
REACT实战项目从0到1搭建（仅供参考）
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
umijs多环境配置_三分钟教你搞定 React 项目多环境配置
weixin_33224795的博客
12-28 1949
在实际项目开发中，前端 er 常常会面对多个环境的接口：开发环境、测试环境、生产环境，所以项目中网络请求的 baseUrl也需要跟随这些环境来变化。但是，我们一般会使用像 create-react-app或者 umi这样的脚手架来做项目的初始化，这些脚手架将 webpack 的配置黑盒化了，如何在不执行 eject 操作的前提下优雅地配置多个项目环境呢？在项目中最好不要一遇到问题就一键执行 ej...
搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细
2401_84091580的博客
04-23 649
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
react获取地址栏_react组件 如何获取URL 参数
weixin_39702316的博客
12-23 484
//客户端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 2119
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 1744
暴露配置文件： create-react-app 生成的项目看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令 npm run eject 修改配置文件： webpack.config.js //把一个路径或路径片段的序列解析为一个绝对路径 path.resolve(__dirname, '../') // 静态储存当前目录绝对路径 __dirname：目录名 const staticRootDir = path.resolve(__dirname, '../'); reso
在react项目中使用环境变量优化axios配置
cyj5201314的博客
06-10 172
环境变量设置
react多个网络请求_React 中请求远程数据的四种方法
weixin_39949607的博客
12-19 754
react是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过HTTP请求数据并将其发送到Web API，可以考虑下面四种方法。内联写法集中管理自定义Hookreact-query/swr注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之...
react.js 之 create-react-app 命令行工具系统讲解
hahahhahahahha123456的博客
06-29 625
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项目配置axios和反向代理和process.env环境配置等
牛先森家的博客
07-06 3368
React项目配置axios和反向代理和process.env环境配置等
vue-cli3中process.env.BASE_URL配置、接口代理以及其他配置
热门推荐
后知后觉
12-05 11万+
  vue-cli3的源码部分：@vue/cli-service/lib/util/resolveClientEnv.js module.exports = function resolveClientEnv (options, raw) { const env = {} Object.keys(process.env).forEach(key =&gt; { if (pre...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值