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

修改打包后的目录

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

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

npm run eject

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

然后可能会有报错:

image.png

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

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

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

"eslintConfig": {"extends": ["react-app","react-app/ject"]
}

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

image.png

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

问题解决!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/651467.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Feign功能详解、使用步骤、代码案例

简介:Feign是Netflix开发的声明式,模板化的HTTP客户端,简化了HTTP的远程服务的开发。Feign是在RestTemplate和Ribbon的基础上进一步封装,使用RestTemplate实现Http调用,使用Ribbon实现负载均衡。我们可以看成 Feign R…

AIGC学习步骤

目录 AIGC学习步骤 步骤一:理解基本概念 步骤二:学习资源 步骤三:深入研究 步骤四:联系专家 步骤五:实践应用 步骤六:持续学习 AIGC学习步骤 我们先来说说什么是AIGC? 生成式人工智能—…

大数据第七天

文章目录 吐槽一下这个是怎么需要真的这么大吗? 内核错误内核软死锁(soft lockup)我这个cpu很高吗?大模型都说了不超过80就行了 FinBi安装FinBI下载链接安装时间比较长 吐槽一下 dbeaver 查询hive 数据信息是真的慢,没有一点快的方式&…

结合创新!LSTM+Transformer新成果登Nature,精度高达95.65%

推荐一个能发表高质量论文的好方向:LSTM结合Transformer。 LSTM通过门控机制有效捕捉序列中的长期依赖关系,防止梯度消失或爆炸,在处理具有长期依赖性的时间序列数据时有显著优势。而Transformer通过自注意力和多头注意力机制全面捕捉序列依…

SEO之链接原理(三)

初创企业需要建站的朋友看这篇文章,谢谢支持: 我给不会敲代码又想搭建网站的人建议 (接上一篇) 4、 Google PR PR是 PageRank 的缩写。Google PR理论是所有基于链接的搜索引擎理论中最有名的。 PR是Google创始人之一拉里佩奇发明…

电机入门1

文章目录 122.12.22.3 33.13.23.33.4 1 2 2.1 电机板 驱动板电机分类 驱动器分类 转速 转向扭矩定时器 ADC 2.2 PID 自动控制 的核心闭环控制算是 PID的应用 2.3 无刷电机用的 可大大提高其控制效率 和控制精度 3 开发板的IO 电流太小了 20~25ma 电机要A 驱动板 信号放大没舵…

一键直达:Xinstall的URL唤起App解决方案

在移动互联网时代,App已经成为我们日常生活中不可或缺的一部分。然而,随着App数量的激增,如何让用户更便捷地访问和使用App成为了一个亟待解决的问题。这时,Xinstall作为国内专业的App全渠道统计服务商,提供了一种创新…

Trivy离线扫描:容器安全实践指南

一、Trivy简介 1.1 Trivy 概述 Trivy 是一款全面多功能的安全扫描器。Trivy具有寻找安全问题和目标的扫描器。现已经被 Github Action、Harbor 等主流工具集成,Trivy支持大多数流行的编程语言、操作系统和平台的扫描,应该是该领域目前目前采用最广的开…

江苏开放大学2024年春《机电设备安装与调试 050095》第三次形成性考核作业参考答案

电大搜题 多的用不完的题库,支持文字、图片搜题,包含国家开放大学、广东开放大学、超星等等多个平台题库,考试作业必备神器。 公众号 答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案&#…

Allegro封装如何更新焊盘

Allegro封装如何更新焊盘 1、打开封装,选择Tool->Padstack->Refresh… 2、选择Refresh all padstacks,更新所有焊盘,然后点击Refresh。 3、更新完成后,点击“View Log…”可以查看更新焊盘的成功与失败。

To String的几个作用

To String的几个作用 一、Object类中toString的作用 1、在主方法中我们可以直接用toString输出对象其中的内容 2、我们需要直接输出对象中所属内容时,直接使用toString方法输出语句,输出内容不友好,不便于阅读 子类: public c…

python利用tg机器人推送发消息从安装到使用(二)

上一篇请参考: python利用tg机器人推送发消息从安装到使用-CSDN博客 本篇主要针对第二种方式推送tg消息,也就是使用telegram库的Bot发送消息,不仅可以发送文本,还可以方便的发送超链接内容和图片。 不过,随着telegram库的升级等各种原因,目前网上很多代码都不能直接使…