【React】反向代理和修改打包后的目录

反向代理

前提是做了反向代理:

安装 http-proxy-middleware

复制代码
npm i http-proxy-middleware

在src/下新建 setupProxy.js

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,
    }))
};

修改打包后的目录

由于我的前端静态资源以 static 开头,但是 create-react-app(基于 webpack)默认在打包应用时,也会将打包好的资源放置到打包后的 static 目录下,导致在加载打包后的资源时,不在前端打包资源中寻找,而是进行了请求转发(反向代理),按着前端的打包资源地址,去服务端请求资源,导致请求不到资源,报错。

所以就需要修改打包后的目录,首先运行:

sh 复制代码
npm run eject

目的是让webpack 相关配置显现出来(默认是内部隐藏掉了)。

然后可能会有报错:

这时我们需要将 git 仓库的文件提交一下。

之后再次执行命令就可以了,webpack 等相关配置全部显现。

然后会再次出现 babel 报错,只需要删掉 package.json 中的:

json 复制代码
"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/ject"
    ]
}

然后在 config/webpack.config.js下修改:

可以将 static 修改为其他名称,比如这里修改为了 assets。

问题解决!

相关推荐
剑亦未配妥2 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君8 小时前
实现最大异步并发执行队列
javascript
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿11 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL11 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉11 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~11 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js