开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何为it服务器上不存在的资源使create-react-app返回404

为了使create-react-app返回404错误，可以通过以下步骤实现：

确保你已经安装了create-react-app工具，并且已经创建了一个React应用程序。
打开React应用程序的根目录，找到public文件夹。
在public文件夹中创建一个名为404.html的文件。
在404.html文件中，可以编写自定义的404错误页面内容，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>404 Not Found</title>
  </head>
  <body>
    <h1>404 Not Found</h1>
    <p>The requested resource could not be found.</p>
  </body>
</html>

在public文件夹中创建一个名为.htaccess的文件（如果你使用的是Apache服务器），或者创建一个名为web.config的文件（如果你使用的是IIS服务器）。
在.htaccess或web.config文件中，添加以下配置：

# 如果请求的资源不存在，则重定向到404.html页面
ErrorDocument 404 /404.html

保存并关闭.htaccess或web.config文件。
现在，当访问React应用程序中不存在的资源时，create-react-app将返回自定义的404错误页面。

这种方法适用于使用Apache或IIS等服务器托管React应用程序的情况。如果你使用的是其他服务器或云平台，可以根据其文档或配置方式进行相应的设置。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：腾讯云云服务器
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理大量非结构化数据。详情请参考：腾讯云对象存储

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从0到1使用vite搭建react项目保姆级教程

SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完善

01

在 React 应用中获取数据

可以说 React 是构建 web 应用最流行的库。然而，它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。

02

[译] 定制 create-react-app：如何制作自己的模版

原文：https://auth0.com/blog/how-to-configure-create-react-app/#Test-Your-Custom-Script

01

React Router 6 (React路由) 最详细教程

React Router 经历多个版本的发展，现在已经到了 React Router 6。虽然网络上写 React-Router 路由本身的教程很多，但真正讲到 React-Router 6 的并不多。同时因为第 6 版引入了很多新的概念，以及大量使用 Hook，因此网上的很多旧教程已经不实用了。这篇文章里我们总结 React Router 6 路由器的用法，用例子说明如何实现各种场景和需求，比如程序化跳转等等。

09

React脚手架

react脚手架: 用来帮助程序员快速创建一个基于react库的模板项目，包含了所有需要的配置（语法检查、jsx编译、devServer…），下载好了所有相关的依赖， react提供了一个用于创建react项目的脚手架库: create-react-app，项目的整体技术架构为: react + webpack + es6 + eslint，使用脚手架开发的项目的特点: 模块化, 组件化, 工程化。

02

React Router初学者入门指南（2023版）

如果你对React Router还不熟悉，你可能习惯使用普通的链接（a标签）在你的应用程序中进行导航。然而，当你想在导航时保留应用程序的当前状态时，就会出现问题。不幸的是，普通的链接通常会触发页面刷新来显示组件，从而破坏用户体验。这就是React Router的用武之地。

03

React 入坑第一弹

一直念叨前端三大框架，React、Vue、Angular，可我实际中用的只有Vue，Angular在刚毕业那会儿用过点皮毛，基本上就是照葫芦画瓢，现在也忘得一干二净。React的大名早已久仰，也看过所谓的入门教程、快速上手教程，但是没有做过实际的项目，没有动手练习，都是白搭。今年，正好手上有个项目用的React全家桶，所以趁机重新学习一下React。接下来就是记录我学习React遇到的问题、踩过的坑。

03

使用 React 和 Django REST Framework 构建你的网站

在我们最近的工作中，构建网站使用的架构是带有 Django REST Framework（DRF）后端的 React 前端。它们是通过在前端使用 axios（前端库）调用后端 API 来交互的。我们还使用了 Redux（前端库）来存储全局的应用程序状态（存在浏览器端）。这是我们首选，因为它允许前后端完全分离。只要我们提前定义好请求的资源列表（后面单个都简称：endpoint）和返回的数据格式，前端和后端就可以并行的进行开发。这也使我们可以轻松的为未来的任何项目创建移动端 App，因为它们仍然可以复用后端 A

07

使用 React 和 NodeJS 创建一个全栈项目

我们都知道 React 非常优秀并且非常出色，我们可以使用 create-react-app 快速搭建一个前端应用。但是由于 React 构建出来的只是前端静态资源（如：HTML、CSS 、JS 等），往往不能独立部署，我们还需要一个 WEB 服务器，还需要调用 API；在本文中，我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载 React 构建出的静态资源，如何让 React 程序可以直接调用 NodeJS API。

04

React基础(1)-create-react-app

如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词

07

React学习(一)-create-react-app

如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词

02

【React 实战教程】从0到1 构建 github star管理工具

在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。

02

常用的package.json，还有这么多你不知道的骚技巧

在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。

03

带你了解一些package.json的骚操作

“ 关注前端开发社区，回复"1"即可加入前端技术交流群，回复 "2"即可免费领取 500G前端干货！

05

带你了解一些package.json的骚操作

在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。

04

nodejs+express应用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

npx命令的介绍

npm 从5.2版开始，增加了 npx 命令。它有很多用处，本文介绍该命令的主要使用场景。

03

你应该知道什么是NPX?

“ 关注前端开发社区，回复“1”即可加入前端技术交流群, 回复 '2'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步

00

React 面试必知必会 Day8

React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器，它与客户端的模式相同。

04

react项目打包优化

新公司所有的项目基本上都是使用 react 进行开发，之前的工程师是自己使用 webpack 搭建的项目，因为涉及到的东西不多，而且存在一些问题，已经启用。同时因为项目时间原因没有太多时间自己搭建，而且自己较懒，所以选择了使用 create-react-app 进行项目的开发。

03

react项目预渲染开发

react越来越火了，是开react开发的人员而是越来越多。但是因为单页应用SEO的问题，我们也不得不去解决这个问题。不管是哪里，都提供了两种方案，一种是SSR服务端渲染，另一种则是预渲染方式。本篇文章主要是阐述预渲染的方案。

02

在Linode上部署React应用程序

React是一个用于构建用户界面的流行JavaScript库。虽然React经常被用作更复杂应用程序的前端，但它也足够强大，可以单独用于完整的客户端应用程序。

04

create-react-app项目支持多入口注意事项

create-react-app 配置多个html入口的方法，有很多现成的文章资料，但是其中有个3个细节点，大家讲解的不详细，本文做说明

01

React+TypeScript开发--环境搭建

打开Node.js的官网，它会自动识别所在的环境，推荐你下载相应版本，左侧是持久支持的稳定版本，右侧是最新版本。我用的是Mac所以这里进入下载的是Mac版。

01

从零开始react实战:云书签-1 react环境搭建

本篇是实战系列的第一篇，主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能：

03

使用vite开发react应用

最近因工作需要，需要开发一个后台管理系统。考虑到开发效率和技术成熟度，决定使用 React 和 Ant Design 的技术栈。

02

大前端快闪二：react开发模式一键启动多个服务

最近全权负责了一个前后端分离的web项目，前端使用create-react-app[1], 后端使用golang做的api服务。

03

【React 实战教程】从0到1 构建 github star管理工具

在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。

01

通过Node.js完美解决Vue-Cli3.0上线时的二大痛点

在前端框架的历史中，React 和 Angular 一直都处于主角的位置。其间，有众多的新框架试图冲杀进来分一杯羹，但都未成功，除了 Vue。

07

React官方脚手架create-react-app

为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 create-react-app所创建的应用入口文件是src/index.js文件。 1、使用的原因以及特性：无需配置；集成了对 React, JSX, ES6 和 Flow 的支持；集成了开发服务器；配置好了浏览器热加载的功能；在 JavaScript 中可以直接 import CSS 和图片；自动处理 CSS 的兼容问题，无需添加 -w

03

npx 是什么？

这条命令会临时安装 create-react-app 包，命令完成后 create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。

01

01-React搭建react环境及SCSS的配置

零、前言关于React不做自我介绍了。 create-react-app 快速搭建React环境，自带热加载，服务器。电脑与手机在同一wifi下可以通过ip访问项目，实现手机电脑同时预览

02

我的第一个React应用

说起前端框架，我的第一反应就是Angular，Vue和React了，在实习的时候Vue和Angular都使用过，也写过相关的博客，包括自己毕业设计就是Angular来做的，但是毕业之后，在现在家公司就没有机会去使用这些框架(实际上我对于Java更加感兴趣)，所以现在对于前端框架的了解可能只是知道一些名词了。这次由于公司产品新的版本用的是React框架，所以有了学React的想法(当然只是想简单的学一些，够用就行了)

05

【Scratch入门到精通】使用CRA搭建项目

本文教你从0到1教你，如何使用 create-react-app 搭建scratch项目，实现简基础的积木编程与舞台渲染效果。Github项目usetools/scratch-example/v1.0.0。

02

使用 Electron 和 React 构建桌面应用

Electron 是一个使用 HTML、CSS、JavaScript 构建跨平台桌面应用的框架。

02

如何在Ubuntu上使用Webhooks和Slack部署React

Webhook，也就是人们常说的钩子，是一个很有用的工具。你可以通过定制 Webhook 来监测你在 Github.com 上的各种事件，最常见的莫过于 push 事件。如果你设置了一个监测 push 事件的 Webhook，那么每当你的这个项目有了任何提交，这个 Webhook 都会被触发，这时 Github 就会发送一个 HTTP POST 请求到你配置好的地址。

02

Nest + Sharp 实现了一个 gif 压缩工具，帮我省不少钱

animated 设为 true 是读取所有的帧，不然默认只会读取 gif 的第一帧。

02

react学习系列3 使用koa-router模拟后台接口

当用create-react-app创建好项目，启动后会自动打开 localhost:3000。我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求，拿到我们想要的 json 数据。并渲染到前台。这样的话需要先创建一个后台服务器。我们使用NodeJS的 express 或 koa 服务器框架。下面以 koa 为例。

04

如何用 esbuild 替换 Create React App 中的 Webpack

原文链接：https://devtails.xyz/how-to-replace-webpack-in-create-react-app-with-esbuild[1]

02

Electron 常见问题收录

由于 Windows 和 Mac 原生的应用程序开发难度比较大，所以使用 Electron 版 TRTC 的能力就成了一个不错的选择。不过由于国内网络环境比较复杂，而 Electron 的很多开发资源由位于境外服务器上，所以很多客户在初次对接时会遇到很多的环境配置问题。

如何解决React官方脚手架不支持Less的问题

create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。

03

使用create-react-app简化前端项目的建立

以往启动一个Web项目，总要从一个现存的项目将gulpfile.js, package.json拷贝至新项目，然后根据需要修改这两个文件，确实挺麻烦的。今天在github上看到一个评分还比较高的项目create-react-app 。细细看了下它的文档，发现facebook通过这个项目将react的前端项目标准化了，约定大于配置，通过这个工具创建项目方便多了，这里记录一下以备忘。创建项目执行以下命令： #安装create-react-app命令 npm install -g create-react-a

05

如何将Docker镜像从1.43G瘦身到22.4MB

Docker镜像的大小对于系统的CI/CD等都有影响，尤其是云部署场景。我们在生产实践中都会做瘦身的操作，尽最大的可能使用Size小的镜像完成功能。下文是一个简单的ReactJS程序上线的瘦身体验，希望可以帮助大家找到镜像瘦身的方向和灵感。

03

Docker镜像瘦身：从1.43G到22.4MB

“ Docker 镜像的大小对于系统的 CI/CD 等都有影响，尤其是云部署场景。我们在生产实践中都会做瘦身的操作，尽最大的可能使用 Size 小的镜像完成功能。下文是一个简单的 ReactJS 程序上线的瘦身体验，希望可以帮助大家找到镜像瘦身的方向和灵感。如果你正在做 Web 开发相关工作，那么你可能已经知道容器化的概念，以及知道它强大的功能等等。但在使用 Docker 时，镜像大小至关重要。我们从 create-react-app （https://reactjs.org/docs/create

02

Create React App 源码揭秘

文章首发于@careteen/create-react-app，转载请注明来源即可。

02

React.js基础知识总结一

React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作

03

基于create-react-app打包编译自己的第三方UI组件库

这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件，并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm，供他人使用，就比如elementUI或者Ant Design。

08

十七、详解 ES6 Modules

对于新人朋友来说，想要自己去搞定一个ES6开发环境并不是一件容易的事情，因为构建工具的学习本身又是一个非常大的方向，我们需要花费不少的时间才能掌握它。

02

[技术地图] CodeSandbox 如何工作? 上篇

这期来关注一下CodeSandbox, 这是一个浏览器端的沙盒运行环境，支持多种流行的构建模板，例如 create-react-app、 vue-cli、parcel等等。可以用于快速原型开发、DEMO 展示、Bug 还原等等.

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭