react项目服务器打包报错文件不存在，本地打包可以踩坑记录

最新推荐文章于 2023-07-20 15:16:25 发布
最新推荐文章于 2023-07-20 15:16:25 发布
阅读量693 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react + ant-design 文章标签： javascript reactjs linux windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44197210/article/details/117296698
在开发前端项目时，作者遇到了一个由于文件名大小写不一致导致的问题。尽管项目在Windows 10上运行正常，但在Linux服务器上打包时出现了文件找不到的错误。经过排查，发现是引用的IndexResult.jsx文件实际命名为indexResult.jsx。由于Windows不区分文件名大小写，而Linux区分，这个问题在本地未显现。为避免类似问题，作者决定在后续开发中严格使用复制粘贴来确保文件名的准确性。

之前遇到一个问题，就是咱们的前端项目能在我自己的windows10上成功运行。npm build也能成功！但是在服务器打包的时候就报错说文件找不到
就是这个 …/payment/refund/IndexResult.jsx
报错信息
刚开始我以为是文件在本地没有提交，后来提交之后还是报错；
最终仔细排查发现是文件的大小写不正确，文件命名为 indexResult.jsx,而在引用的时候是IndexResult；
在windows上不区分大小写，而Linux是区分大小写的！ 血泪的教训，之后我在开发中就坚决只复制粘贴，再也不敢手打了😂

在这里插入图片描述

Windows下的Nginx部署React项目及解决反向代理跨域问题等-20.8.1更新
xiao廸要飞
08-01 2377
文章目录1. 概述2. 优点3. 为什么选择Nginx4. 下载5. 安装6. 配置参数详细说明7. 命令行参数7.1 启动nginx7.2 重启nginx——重新加载配置7.3 停止nginx7.4 运行`Nginx`时指定配置文件7.5 新打开日志文件7.6 修改`nginx.conf`文件后测试是否通过7.7 nginx的命令行参数列表8. 发布React项目8.1 脚手架工具打包8.2 部署8.2.1 部署到根目录下8.2.2 部署到子目录下8.2.3 跨域8.3 React项目部署踩坑8.3.1
Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)
超悠閒的博客
03-03 3808
Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6) 文章目录Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)0. 项目背景1. 问题描述2. 问题排查 & 解决方案解决方案附录：示例项目运行文档参考连接 0. 项目背景 React/Vue 等 SPA 前端应用使用 hist
react 把配置文件解出来后项目运行出现错误（缺失包）
北芒的博客
05-17 564
出现这个的原因的你解压的时候出现错误 我在解压的时候并没有看到错误为什么会出现错误？ 这个解压的并不是它的错误，而是和你电脑的性能有关 在cmd 中会有提示，你把缺失的包再安装一下就行了（有时候并不是只缺失一个包） 第一行就是缺失包 安装缺失的包 ...
react项目打包
B13362260109的博客
07-20 1538
2.在项目根目录中执行命令serve -s ./build 在build目录中开启服务器。2.在package.json中的scripts标签中，添加分析打包体积命令。3.在浏览器中访问：http://localhost：3000/ 预览项目。2.在路由Router内部，使用Suspense组件包裹组件的内容。2.等待打包完成，打包生成的内容被放在根下的build文件夹中。5.通过浏览器打开的页面，分析图标中的包体积。1.在App组件中，导入Suspense组件。在package.json中。
关于React安装出现的错误的相应解决方案
qq_72760247的博客
12-31 900
关于React安装出现的错误的相应解决方案
react获取不到目录中文件的坑
qq_58174484的博客
07-09 1041
react获取不到目录中文件的坑
【React】:Uncaught SyntaxError: Unexpected token ‘＜‘ 这种错误怎么解决？？？
weixin_53126517的博客
03-18 4321
错误示例如上图， 这个错误的前提应该是没有使用React脚手架，React框架由那么为什么会出现如图错误呢，原因是<script>标签内需要添加type="text/babel" 错误示例： <script> class Todolist extends React.Component { constructor(props) { super(props); this.state = { .
Mac 搭建React Native 0.63.4环境 ，超级详细步骤，含踩坑
weixin_43292375的博客
02-25 1084
Mac 搭建React Native 0.63.4环境 ，超级详细步骤，含踩坑 init 命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目！！！ 提示：你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。 但是此文只针对init最新版本来说明 中文官方文档：ht
React Native - 环境搭建（踩坑指南）
ICodeMan的博客
09-18 2264
官方文档： https://reactnative.cn/docs/getting-started/ 使用环境： Windows &amp;amp; Android 缩略词： RN(React Native)、AS(Android Studio) 文章目录1. 初始化项目1.1 需要的环境1.2 需要的配置2. 开始第一个项目3. 集成 RN 项目到Android（Gradle项目）3.1 准备工...
Create React App proxy配置
晴晴晴的博客
07-17 659
最近又吃了没文化的亏（哭晕在洗手间≧ ﹏ ≦） 做后台管理系统的时候，需要调一个易连云打印小票的接口， 项目框架是 Create React App+typescript，后端是node.js 本媛负责前端开发。下面是一些踩坑经历，都怪我学术不精，又吃了没文化的亏 踩坑一 调易连云接口时候，因为是第三方接口，报了跨域的错误，所以就用配置proxy的方法。 请求报错 1.Provisional headers are shown （请求没发出去？emmmm） 2.‘has been blocked by CO
Uncaught SyntaxError: Unexpected token ‘＜‘ vue react
fred8的博客
04-25 1111
Uncaught SyntaxError: Unexpected token '<'Uncaught SyntaxError: Unexpected token '<'报错 vue react控制台显示错误解决方法1解决方法2（文件未引入路径） Uncaught SyntaxError: Unexpected token '<'报错 vue react 最近在写vue react 的项目过程中有报Uncaught SyntaxError: Unexpected token ‘&
React Uncaught SyntaxError: Unexpected token ‘＜‘ 报错
刻痕
02-24 2316
线上项目： 本地正常，线上有问题。重新打包，发版，完事。 如果index.html 有js，则： <script type="text/babel" src="%PUBLIC_URL%/jweixin-1.6.0.js"></script> 尽量配置 - 前端不缓存配置 index.html / head 内添加： <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"
解决：react项目部署到服务器，刷新报“Uncaught SyntaxError: Unexpected token ＜“ 错误
qq_41355222的博客
10-20 3309
因为使用npm run build生成的build目录。原因就是生成的index.html引用的js文件路径不对。 <script src="./static/js/main.2a806527.chunk.js"></script> 多出来一个’.’，此时突然想起来，刚开始使用react的时候在package.json添加了一行代码"homepage": “.”。 修改为网站的网址"homepage": “http://110.42.213.191:3001/”，问题解决。 ..
Eclipse升级之后出现R文件不存在的问题
批判是一个巴掌的专栏
04-13 957
前几天，自己在弄一个小的项目的时候，用到一个控件，这个控件是Android 5.0 版本的，所以之前的Eclipse和sdk版本都不能用这个控件，我就在官网下载了高版本的Eclipse（下载地址），然后用了我自己以前下载的API 21 的sdk，结果可以引用这个控件了，但是问题来了，主工程的R文件找不到报错了，我尝试着新建个工程看看，奇怪的是我新建的工程也没有R文件，在网上找了很多资料，也没弄好。
记一次前端打包错误排查
weixin_33939380的博客
05-23 745
虽然标题称错误为前端打包错误，但更具体的说这个错误是react-native打bundle包的时候出现的。因为排查过程有一定的通用性，所以我将这个错误描述成是前端打包的错误。 错误信息如下图所示： 从错误信息可以看出这个错误是json字串解析错误（JSON.parse），并且跟缓存相关(Cache.get)。然而除此之外就看不出更多的信息了（上面的描述跟react native没有任何关系，没...
react项目打包报错
oldchao的博客
09-19 1001
react项目打包报错 Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
React项目打包布署及打包后页面可能找不到文件的解决方法
duansamve的博客
03-08 2809
1、打包 在项目目录下，运行npm run build，进行打包，打包完成后会在目录下生成一个build文件夹，build生成的东西要放在服务器root下。 2、部署 打包之前，package.json文件中要增加一个homepage字段： "homepage": ".", 布署的时候你必须把build里的文件直接放到服务器上，假如你的服务器IP是xx.xx.xx.xx，服务器端口为80...
React项目如何打包发布及遇到的坑
热门推荐
天工开物
06-29 5万+
刚开始学习react，遇到一些小问题。我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项目的过程。一、打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)３、...
js React 引入组件大小写必须一致 否则linux 会出现找不到模块的问题
henlang的专栏
05-17 921
js React 引入组件大小写必须一致 否则linux 会出现找不到模块的问题
优化Webpack：解决React项目打包速度慢的问题
例如，我们可以将React配置为外部库，让它指向`window.React`，这样React就不会被包含在打包的JavaScript文件中，从而减少打包时间。 除了`externals`，还有其他优化策略可以提升Webpack的打包速度。其中，`cache`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值