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