React實(shí)現(xiàn)反向代理和修改打包后的目錄
React反向代理和修改打包后的目錄
反向代理
前提是做了反向代理：
安裝 http-proxy-middleware
npm i http-proxy-middleware
在src/下新建 setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/api", {
target: "http://xxx.com:7000" , //配置你要請(qǐng)求的服務(wù)器地址
changeOrigin: true,
}))
app.use(proxy("/static", {
target: "http://xxx.com:7000" ,
changeOrigin: true,
}))
};
修改打包后的目錄
由于我的前端靜態(tài)資源以 static 開頭，但是 create-react-app（基于 webpack）默認(rèn)在打包應(yīng)用時(shí)，也會(huì)將打包好的資源放置到打包后的 static 目錄下，導(dǎo)致在加載打包后的資源時(shí)，不在前端打包資源中尋找，而是進(jìn)行了請(qǐng)求轉(zhuǎn)發(fā)（反向代理），按著前端的打包資源地址，去服務(wù)端請(qǐng)求資源，導(dǎo)致請(qǐng)求不到資源，報(bào)錯(cuò)。
所以就需要修改打包后的目錄，首先運(yùn)行：
npm run eject
目的是讓webpack 相關(guān)配置顯現(xiàn)出來（默認(rèn)是內(nèi)部隱藏掉了）。
然后可能會(huì)有報(bào)錯(cuò)：
這時(shí)我們需要將 git 倉庫的文件提交一下。
之后再次執(zhí)行命令就可以了，webpack 等相關(guān)配置全部顯現(xiàn)。
然后會(huì)再次出現(xiàn) babel 報(bào)錯(cuò)，只需要?jiǎng)h掉 package.json 中的：
"eslintConfig": {
"extends": [
"react-app",
"react-app/ject"
]
}
然后在 config/webpack.config.js下修改：
可以將 static 修改為其他名稱，比如這里修改為了 assets。
問題解決！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中setState的使用與同步異步的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
React通過useContext特性實(shí)現(xiàn)組件數(shù)據(jù)傳遞
本文主要介紹了React如何通過useContext特性實(shí)現(xiàn)組件數(shù)據(jù)傳遞，文中有相關(guān)的代碼示例供大家參考，對(duì)我們學(xué)習(xí)React有一定的幫助,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了React實(shí)踐之Tree組件的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
聊一聊我對(duì) React Context 的理解以及應(yīng)用
這篇文章主要介紹了聊一聊我對(duì) React Context 的理解以及應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本文詳細(xì)的介紹了React傳遞參數(shù)的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能
在React中,可以使用useState和useEffect鉤子來實(shí)現(xiàn)錨點(diǎn)定位功能,在Vue中,可以使用指令來實(shí)現(xiàn)錨點(diǎn)定位功能,在React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能的方法略有不同,下面我將分別介紹,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對(duì)這些問題還不是很明白，那么可以在這篇文章中找到答案2022-11-11
react組件實(shí)例屬性props實(shí)例詳解
這篇文章主要介紹了react組件實(shí)例屬性props,本文結(jié)合實(shí)例代碼給大家簡(jiǎn)單介紹了props使用方法，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2023-01-01