React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wè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, //延遲時(shí)間
baseURL: process.env.REACT_APP_BASE_API,
headers: {
"content-Type": "application/x-www-form-urlencoded",
},
})
//請(qǐng)求攔截
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èn)到后臺(tái)的服務(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/', // 后臺(tái)服務(wù)器地址
changeOrigin: true,
pathRewrite: {
['^' + process.env.REACT_APP_BASE_API]: '',
},
}))
}4、paths.js中修改proxySetup路徑，如下圖：
5、tsconfig.json文件更改include修改如下：
"include": [
"src",
"config/setupProxy.js"
]6、頁(yè)面調(diào)用接口：
import React, { useState, useEffect } from "react"
//導(dǎo)入要使用的接口
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)通返回?cái)?shù)據(jù)，效果如下：
proces.env環(huán)境配置
1、新建三個(gè)文件，根目錄下：
2、安裝dotenv-cli運(yùn)行命令
npm install dotenv-cli --save-dev
三個(gè)環(huán)境：
- 一個(gè)開(kāi)發(fā)環(huán)境（development）
- 一個(gè)測(cè)試環(huán)境（test）
- 一個(gè)正式環(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"
下面配置其中一個(gè).env.development環(huán)境：
NODE_ENV = 'development' # just a flag ENV = 'development' # base api 這里是代理的時(shí)候用到的 REACT_APP_BASE_API = '/dev'
注意點(diǎn)：
如果代理遇到接口404問(wèn)題的話，看上面怎么解決的，通過(guò)process.env.REACT_APP_BASE_API去配置代理路徑，這樣的話，其他地方都不用改，打包后的接口里面也不會(huì)多前綴等一系列問(wèn)題。
如果不是很清楚的話，可以參考我之前寫(xiě)的vue代理404問(wèn)題的文章：
Vue代理報(bào)錯(cuò)404問(wèn)題（vue配置proxy）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下2022-11-11
Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程
這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會(huì)從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計(jì)、遷移方案四個(gè)方向逐一介紹我們?nèi)绾我徊讲降貪M足多團(tuán)隊(duì)在復(fù)雜業(yè)務(wù)中的開(kāi)發(fā)需求，需要的朋友可以參考下2022-07-07
一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09
利用React Router4實(shí)現(xiàn)的服務(wù)端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實(shí)現(xiàn)的服務(wù)端直出渲染(SSR)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了react-router-dom之異步加載路由方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
這篇文章主要為大家詳細(xì)介紹了如何基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
React如何通過(guò)@craco/craco代理接口
這篇文章主要介紹了React如何通過(guò)@craco/craco代理接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來(lái)很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來(lái)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了React Hooks的深入理解與使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
React State狀態(tài)與生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03