react项目打包后部署到服务器报错

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 900+累计阅读 971平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄7年

关注

原创最新推荐文章于 2026-04-14 09:54:55 发布 971 阅读 AI 写同款· GEO 优化 ›

React项目的打包与部署到腾讯云腾讯云送了30天的免费试用，于是有了把react项目部署到上面的想法。项目是默认生成的，只是一个页面，但是这个过程中也遇到了不少麻烦与问题。下面来具体梳理下： create-react-app 来自Facebook官方的零配置命令行工具。create-react-app是来自于Facebook出品的零配置命令行工具，能够帮你自动创建基于Webpack+ES6的最简易的Re 阅读详情

使用react脚手架创建的项目直接打包丢服务器后进入index.html会报错无法启动项目
在这里插入图片描述
1.需要在package.json中添加

 "homepage": ".",

在这里插入图片描述
这样打包后把build文件直接丢服务器下就可以访问了

收录于

react记录

当前文章被收录于：

react记录

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

react项目打包编译最近有个项目需要用到react做一个前端界面，在网上搜索了一些关于react相关的知识，感觉比较多、而且零散。我虽然是一个后端开发工程师，但之前接触过一些界面开发，比如：jsp、ajax、html、css的还是了解一些，但是遇到这个react，感觉有点懵比。写法上和之前的完全不同，而且看了一写示例后发现，现在的前端开发和后端有点类似了，需要编译、打包... 好了，废话不多说，进入今天的正题。我在github上找到一个项目https://github.com/ltadpoles/react-admin通过. 阅读详情

相关推荐

在阿里云 ECS 服务器部署 React + Express 项目

项目开发了一部分，准备先上线看看效果，就进行了部署。以下是文档记录。0-选购阿里云 ECS 服务器 操作系统： Ubuntu 14.04 64位 1-创建普通用户登录方式使用阿里云管理终端连接 ECS 实例实际操作过程中，发现这种方式速度慢，易卡死。本地通过 SSH 登录参考文档配置好秘钥后，用起来速度飞快。创建普通用户创建一个名为cat的普通用户。注：如果使用阿里云管理终端登录，跳过第

Beijiyang 2895

React项目打包部署到服务器上的遇到的问题

上一篇我我们讲到关于vue-cli的项目部署的一些小坑，但是对于React项目，如果用create-react-app脚手架运行npm run build后，直接把build文件夹扔到服务器，也会出现同样的问题，怎么才能直接点击运行index.html呢？？？最简单的方法：个人比较推荐这种，省事----修改package.json 修改配置文件----node_modules/reac...

QTFYING的博客 3393

实战：node-react项目部署到服务器(1)

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等。

2401_84093973的博客 1182

react项目部署到服务器，刷新页面报错的两个问题

前端使用react开发，通过create-react-app搭建react环境，通过npm run build生成的 build目录，使用nginx做为代理服务器。项目在本地开发时，没有任何问题，部署到服务器上出现了2个问题。问题一：开发的应用是单页面应用，从主页一步一步点击没有问题，一旦刷新或者直接在地址栏输入，都会出现报错，显示的是404，无法找到页面。问题二：解决404后，刷新或者直...

liang359975715的博客 1868

VMware 虚拟机里连不上网的五种解决方案

在VMware虚拟机里的虚拟机系统连接不上网络首先，注意查看适配器选项里的网络连接这两个网络连接是否存在，如果不存在可以重新装一下VM 如果存在，连不上网解决办法一：虚拟机设置里，找到“网络适配器”,右边的网络连接选择“NAT 模式”，如果不行的话再linux系统。还是不行的话接着看第二种解决方案。解决方法二：可能原因是VMware NET Service...

墨轩 18万+

点云中的Minkowski卷积

一、MinkowskiEngine简介第一次见到MinkowskiEngine，应该是在两个月之前了，当时也没有去留意这个库。最近读了一些点云的论文，发现还是有不少论文的源码是基于MinkowskiEngine的，包括PointContrast(ECCV 2020)，DGR(Deep Global Registration, CVPR 2020)，Learning Multiview 3D Point Cloud Registration(CVPR 2020)和FCGF(Fully Convolution

zhulf0804的博客 7906

超简单的React项目打包后部署到服务器上

前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。如图：用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。 ...

nihaio25的博客 2万+

存内计算路线再获加持，清华存内芯片登Science

通过这种方法，可以比较有效的控制二氧化铪忆阻层中的微观变化，以及内部的温度和电场，使得器件具有非常优异的电学特性，而且可以在工厂里大规模生产，推动了高性能忆阻器阵列的诞生。团队搭建了全硬件构成的完整存算一体系统，如下图7所示，在系统里集成了多个忆阻器阵列，并在该系统上高效运行了卷积神经网络算法，成功验证了图像识别功能，证明了存算一体架构全硬件实现的可行性,并且成功实现了以更小的功耗和更低的硬件成本完成复杂的计算[6]。根据测试，在一般神经网络中权重更新的最后阶段，调整步长非常接近0，如图9（C）所示，

PXX12345678的博客 1555

React部署失败问题总结

React开发的部署通常包括两个主要方面：构建应用程序和将应用程序部署到服务器。在React开发过程中，可能会遇到各种部署问题，本文将介绍一些常见的部署问题并提供解决方案。

523varaChen 929

噪声整形与过采样实战：从N-bit ADC到DSM的SQNR优化指南

本文深入探讨了噪声整形与过采样技术在DSM（Delta-Sigma调制器）中的应用，重点分析了量化器位数（N）、滤波器阶数（L）和过采样率（OSR）对SQNR优化的影响。通过实战案例和参数协同优化策略，帮助工程师在音频处理和通信系统设计中实现更优的信号质量。

weixin_42561040的博客 339

Python入门之机器学习（非常详细）篇幅拉满，一般人看不完！

什么是机器学习？监督学习 supervised learning;非监督学习 unsupervised learning;半监督学习 semi-supervised learning;强化学习 reinforcement learning;监督学习是不断向计算机提供数据（特征），并告诉计算机对应的值（标签），最后通过大量的数据，让计算机自己学会判断和识别。例如Google Photo，你在APP中输入狗，这时就会弹出与狗相关的图片，这背后使用的算法就是监督学习。

xiaolinyui的博客 2万+

前端检查本机注册表文件，如果有打开程序，如果没有下载程序/注册表文件

之前有一篇博文写的是通过自定义注册表以绝对路径方式，通过前端打开电脑本地的程序。（指路https://editor.youkuaiyun.com/md/?articleId=108243095）以这个方式实现了打开本地程序以后，随之而来了一个新的问题。当用户要求浏览器端打开一个新的程序，这个新的程序的注册表名不存在，怎样给用户提示，怎样动态下载程序或者是注册表。以下是在react框架中的实现方式： 1.下载jQuery依赖包 http://www.jq22.com/jquery/jquery-3.4.1.zi.

weixin_38008461的博客 2804

目标检测——布匹缺陷检测数据集

结构瑕疵指的是布料本身的缺陷，包括嵌结、抽纱、错纱、断纱、预缩等问题，这些问题通常是在布料生产过程中出现的。而质量瑕疵则是指布料在使用过程中出现的问题，如污渍、断裂、鼓囊、针眼等，这些问题可能由生产过程中的结构瑕疵导致，也可能是在运输、存放和使用过程中引起的。布匹瑕疵如缺纬、断纬、粗纬、松纬、缺经、断经、粗经、筘痕、污点、破损等，若未得到及时有效的检测，这些瑕疵产品可能会流向市场，导致消费者的不满和退货，严重影响企业的声誉和品牌形象。织疵包括缺经、缺纬、跳花、弓纱、错纱、厚薄段、油污渍等；

zzjlhlcd的博客 612

ReduxCasts项目部署指南：从开发到生产的完整流程

ReduxCasts是一个专注于Modern React with Redux技术栈的项目，本指南将带你完成从环境搭建到生产部署的全过程，帮助新手开发者快速掌握ReduxCasts项目的部署方法。 ## 📋 准备工作：环境搭建 ### 安装Node.js和npm 确保你的系统中已安装Node.js和npm。你可以通过以下命令检查版本： ```bash node -v npm -v ```

gitblog_01152的博客 834

SAP 行业扫盲系列之一：SAP 从业者的分类

本文简单介绍了 SAP 从业者的分类，限于笔者狭隘的视角，可能存在遗漏或者不恰当的地方，希望大家在评论区指出。那些在知乎咨询上向我提问关于进入 SAP 行业建议的朋友们，也请大家提问时注明自己想具体从事 SAP 行业哪一类的工作，这样才能得到更让你们满意的回复。感谢阅读。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 1588

FPGA开发中的操作系统

在FPGA开发中，操作系统起着关键的作用，它负责任务管理、资源管理、中断处理和设备驱动程序等功能。在实际的FPGA开发中，可以选择使用现有的操作系统，如MicroC/OS-II、FreeRTOS等，或者根据具体需求自行设计和开发操作系统。在FPGA（可编程逻辑门阵列）开发中，操作系统扮演着关键的角色，为硬件设计师提供了一种有效的方式来管理资源、调度任务并实现系统级功能。本文将介绍FPGA开发中的操作系统概念，并提供一个简单的示例代码来说明如何在FPGA平台上实现一个基本的操作系统。

CqpFsharp的博客 1156

react 打包后，项目部署完毕，刷新页面报错（404）

那么你要做的就是修改后台服务器，可以放在apache，也可以放在你的java路由内做一个通配路径处理。服务端路由，不同的服务器配置的方式不同，另外一种简单的解决方法，使用HashRouter，不要使用BrowserRouter，这样所有的请求都会定位到index.html这一个页面，服务器端也不需要任何配置了。之所以你在浏览器内可以由首页跳转到其他路由地址，是因为这是由前端自行渲染的，你在React Router定义了对应的路由，脚本并没有刷新网页访问后台，是JS动态更改了location。

m0_74265396的博客 1289

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

329-将react项目打包部署在服务器上

将react项目打包部署在服务器上我们试一试从0开始将一个react项目部署在服务器上还是踩了很多坑的主要还是因为自己对服务器不是特别精通所以还是要多多学习我们的本地系统是windows 云服务器系统是centos 那么我们在本地创建一个react项目执行 create-react-app demo 这样就创建了一个demo项目如果我们在本地执行 npm star...

Lich Howger 7577

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

react 项目打包部署nginx

在 React 项目开发完成后，可以将其打包并通过 Nginx 部署到服务器上。以下是详细步骤：生成生产环境文件在 React 项目的根目录运行以下命令：这会在项目目录中生成一个 build/ 文件夹，包含优化后的静态资源文件。将 build/ 文件夹上传到目标服务器的指定路径，例如 /var/www/react-app。使用 scp 命令上传 3. 配置 Nginx 3.1 安装 Nginx 如果服务器未安装 Nginx，可以先安装：Ubuntu/Debian： CentOS： 3.2 配置 Ngin

空 1990

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候提示IE WebControls 不通过，这个工具可以欺骗u8的检查。跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

React项目打包部署注意点 + 宝塔面板几步部署项目

1.react项目打包 1.1 终端运行打包命令在编辑器的终端运行vue项目打包命令 yarn build 打包成功如下：这时我们可以看到项目目录多出来一个build文件夹，记住它，后面部署就靠它了。 1.2 修改配置在package.json里面添加一行： "homepage": "." 如果不加上这个的话之后打包的时候,打开index.html会报错，示例如下： 2.宝塔面板部署项目 2.1 部署要求有一台云服务器（笔者这里用的是腾讯云） 服务器安装宝塔面板安装教程 2.2 在

背影、的博客 4326

在windows下导入react项目并且打包编译后部署到nginx上

在windows环境下导入react项目，并将react项目打包编译后部署到nginx上，通过nginx来访问django后端数据。

pikeduo的博客 3117

react项目打包发布

使用create-react-app脚手架创建了react项目，现在想将其部署到公司的服务器上。 create-react-app封装了webpack，默认隐藏了webpack的配置，可以通过执行npm run eject命令将其显示出来，也可以不使用这种方法。部署步骤： 1、打包react项目：npm run build 2、将其放到服务器能够访问的root目录下，如果是root目录下的项目名称文件夹下需要修改访问资源的路径（默认位置为根目录，其修改后的路径为相对路径）否则控制台报错404，

qq_35276073的博客 1862

vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备

前端开发完成的项目，不管是使用vue、react、或者是别的web项目，最终都是要部署到外网上，让用户可以通过域名来访问。这篇文章以一个 react 移动端的项目为例，讲怎样将自己本地的项目部署到阿里云服务器上。文章比较长，第一次部署项目的大体流程如下：部署前的准备，项目打包、阿里云服务器准备；本地连接阿里云服务器； 服务器安装epel仓库; 服务器安装nginx；启动nginx，如果出...

蒲公英芽的博客 5581

react从搭建环境到打包项目

1.环境搭建和项目运行我这边是用得脚手架create-react-app 创建得项目。安装create-react-app： npm install create-react-app 创建项目：create-react-app 项目名切换到项目跟目录：cd目录本地开发环境运行：npm run start //自动打开浏览器看效果这些命令是集成了webpac...

wangshang1320的博客 686

Vue/React 项目部署到服务器后，刷新页面出现404报错

在本地启动项目一切正常，部署到服务器上线后出现BUG，项目刷新页面出现404 ，共有两种解决方案。一，vue router 的 mode 改成hash 。二，配置nginx，将任意页面都重定向到 index.html。扩展1: 为什么hash模式下没有刷新页面404 问题。扩展2：vue路由的两种模式 hash和history的区别

weixin_73318685的博客 2696

上一篇： react定义组件

下一篇： react父子组件传值

在阿里云 ECS 服务器部署 React + Express 项目

Beijiyang

11-17

2895