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

问题解决!

相关推荐
悦涵仙子36 分钟前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
兔老大的胡萝卜37 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf6 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据6 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161776 小时前
防抖函数--应用场景及示例
前端·javascript
334554327 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test7 小时前
js下载excel示例demo
前端·javascript·excel