React項目配置axios和反向代理和process.env環(huán)境配置等問題
更新時間：2022年12月06日 10:23:01 作者：牛先森家的牛奶
這篇文章主要介紹了React項目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
配置axios和代理
1、安裝axios 和 http-proxy-middleware（反向代理用）
npm i axios http-proxy-middleware -S
2、在src目錄下創(chuàng)建api文件夾，然后創(chuàng)建 index.ts 和 request.ts 文件
// request.ts
import axios from "axios"
declare module 'axios' {
export interface AxiosResponse<T = any> extends Promise<T> { }
}
export const Service = axios.create({
timeout: 3000, //延遲時間
baseURL: process.env.REACT_APP_BASE_API,
headers: {
"content-Type": "application/x-www-form-urlencoded",
},
})
//請求攔截
Service.interceptors.request.use((config) => config)
//響應(yīng)攔截
Service.interceptors.response.use(
(response) => response.data,
(err) => console.log(err)
)//index.ts
import { Service } from './request'
//獲取列表
export function getList(config: { page: string, limit: string }) {
const params = new URLSearchParams()
params.append('page', config.page)
params.append('limit', config.limit)
return Service({
method: 'get',
url: 'api/goodlist',
params
})
}3、配置代理，可以訪問到后臺的服務(wù)器地址，在config文件夾中創(chuàng)建setupProxy.js,內(nèi)容配置如下：
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use([process.env.REACT_APP_BASE_API], createProxyMiddleware({
target: 'http://localhost:5000/', // 后臺服務(wù)器地址
changeOrigin: true,
pathRewrite: {
['^' + process.env.REACT_APP_BASE_API]: '',
},
}))
}4、paths.js中修改proxySetup路徑，如下圖：
5、tsconfig.json文件更改include修改如下：
"include": [
"src",
"config/setupProxy.js"
]6、頁面調(diào)用接口：
import React, { useState, useEffect } from "react"
//導入要使用的接口
import { getList } from "../../api/index";
class About extends React.Component {
constructor(props: any) {
super(props)
this.state = {}
}
// 定義方法調(diào)接口
getList() {
getList({ page: "1", limit: "5" }).then((res) => console.log(res));
}
render() {
return (
<div className="about">
<button onClick={this.getList}>獲取數(shù)據(jù)</button>
</div>
)
}
}
export default About
接口調(diào)通返回數(shù)據(jù)，效果如下：
proces.env環(huán)境配置
1、新建三個文件，根目錄下：
2、安裝dotenv-cli運行命令
npm install dotenv-cli --save-dev
三個環(huán)境：
- 一個開發(fā)環(huán)境（development）
- 一個測試環(huán)境（test）
- 一個正式環(huán)境（production）
3、在package.json文件中配置命令：
"start": "node scripts/start.js", "build": "node --max_old_space_size=4096 scripts/build.js", "test": "node scripts/test.js", "build:dev": "dotenv -e .env.development node --max_old_space_size=4096 scripts/build.js", "build:prod": "dotenv -e .env.production node --max_old_space_size=4096 scripts/build.js", "build:test": "dotenv -e .env.test node --max_old_space_size=4096 scripts/build.js"
下面配置其中一個.env.development環(huán)境：
NODE_ENV = 'development' # just a flag ENV = 'development' # base api 這里是代理的時候用到的 REACT_APP_BASE_API = '/dev'
注意點：
如果代理遇到接口404問題的話，看上面怎么解決的，通過process.env.REACT_APP_BASE_API去配置代理路徑，這樣的話，其他地方都不用改，打包后的接口里面也不會多前綴等一系列問題。
如果不是很清楚的話，可以參考我之前寫的vue代理404問題的文章：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React.memo 和 useMemo 的使用問題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁面進行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費性能，從而導致頁面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結(jié),需要的朋友可以參考下2022-11-11
Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程
這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團隊在復雜業(yè)務(wù)中的開發(fā)需求，需要的朋友可以參考下2022-07-07
最近看項目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計思想與工作原理,所以本文詳細的給大家介紹了Redux設(shè)計思想與工作原理,需要的朋友可以參考下2023-09-09
利用React Router4實現(xiàn)的服務(wù)端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實現(xiàn)的服務(wù)端直出渲染(SSR)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
基于React.js實現(xiàn)兔兔牌九宮格翻牌抽獎組件
這篇文章主要為大家詳細介紹了如何基于React.js實現(xiàn)兔兔牌九宮格翻牌抽獎組件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-01-01
這篇文章主要介紹了React如何通過@craco/craco代理接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個Hooks看起來很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來學習吧2023-04-04
這篇文章主要介紹了React Hooks的深入理解與使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
React State狀態(tài)與生命周期的實現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實現(xiàn)方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03