React实现反向代理和修改打包后的目录
更新时间：2024年07月12日 09:45:28 作者：小秀_heo
这篇文章主要介绍了React实现反向代理和修改打包后的目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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 相关配置显现出来（默认是内部隐藏掉了）。
然后可能会有报错：
这时我们需要将 git 仓库的文件提交一下。
之后再次执行命令就可以了，webpack 等相关配置全部显现。
然后会再次出现 babel 报错，只需要删掉 package.json 中的：
"eslintConfig": {
"extends": [
"react-app",
"react-app/ject"
]
}
然后在 config/webpack.config.js下修改：
可以将 static 修改为其他名称，比如这里修改为了 assets。
问题解决！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了react合成事件与原生事件的相关概念，帮助大家区分这两种事件，学习react的同学不妨了解下2021-05-05
这篇文章主要为大家介绍了react最流行的生态替代antdpro搭建轻量级后台管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要给大家介绍了关于利用React撸一个日程组件的相关资料,包括日常组件的实现思路、使用的技术、以及遇到的技术难点，并给提供了详细的实例代码,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详解介绍了如何利用React实现一个有点意思的电梯小程序，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2022-08-08
这篇文章主要介绍了react项目中redux的调试工具不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React，本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼，感兴趣的朋友一起看看吧2021-05-05
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。2017-07-07
这篇文章主要介绍了在 React 中使用 i18next,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
在现代 Web 开发中,动画不仅是提升用户体验的重要手段,更是增强用户交互、引导用户行为、提升界面美感的关键因素,本文将通过两个例子,讲解一下如何在 React 中使用 CSS transition 和 Framer Motion 实现动画,并对比它们的优缺点,需要的朋友可以参考下2025-07-07
这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下2023-02-02
最新评论