【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。

问题解决!

相关推荐
就改了22 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_24 分钟前
Ajax 入门
前端·javascript·ajax
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心1 小时前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了1 小时前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div1 小时前
JavaScript 实用函数大全(超实用)
前端·javascript·面试