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合成事件與原生事件的相關(guān)概念，幫助大家區(qū)分這兩種事件，學(xué)習(xí)react的同學(xué)不妨了解下2021-05-05
react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理
這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要給大家介紹了關(guān)于利用React擼一個(gè)日程組件的相關(guān)資料,包括日常組件的實(shí)現(xiàn)思路、使用的技術(shù)、以及遇到的技術(shù)難點(diǎn)，并給提供了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2021-07-07
利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序
這篇文章主要為大家詳解介紹了如何利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2022-08-08
react項(xiàng)目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項(xiàng)目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們?cè)试S你無需類就使用 React，本文帶領(lǐng)大家學(xué)習(xí)React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧2021-05-05
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
React中實(shí)現(xiàn)動(dòng)畫的兩種方式及對(duì)比詳解
在現(xiàn)代 Web 開發(fā)中,動(dòng)畫不僅是提升用戶體驗(yàn)的重要手段,更是增強(qiáng)用戶交互、引導(dǎo)用戶行為、提升界面美感的關(guān)鍵因素,本文將通過兩個(gè)例子,講解一下如何在 React 中使用 CSS transition 和 Framer Motion 實(shí)現(xiàn)動(dòng)畫,并對(duì)比它們的優(yōu)缺點(diǎn),需要的朋友可以參考下2025-07-07
使用React?Hooks模擬生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了使用React?Hooks模擬生命周期,本文舉例說明如何使用 hooks 來模擬比較常見的 class 組件生命周期，需要的朋友可以參考下2023-02-02