开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从create-react-app生成生产版本时缺少index.html

create-react-app是一个用于快速搭建React应用的脚手架工具。当使用create-react-app生成生产版本时，确实不会生成index.html文件。这是因为create-react-app默认使用了React的单页应用（SPA）模式，将所有的HTML、CSS和JavaScript代码打包到一个bundle.js文件中，并通过一个自动生成的index.html文件来加载这个bundle.js文件。

在create-react-app生成的项目中，public文件夹下的index.html文件是一个模板文件，用于在开发环境和生产环境中生成最终的index.html文件。在生成生产版本时，create-react-app会自动将bundle.js文件插入到index.html文件中，并将生成的index.html文件放置在build文件夹中。

对于缺少index.html文件的情况，可以尝试以下解决方法：

确保使用了正确的命令生成生产版本。在项目根目录下运行以下命令：

npm run build

这将使用create-react-app的默认配置生成生产版本，并在build文件夹中生成index.html文件。

检查是否有自定义的配置导致了index.html文件缺失。如果在项目中进行了自定义配置，可能会影响到生成的index.html文件。可以检查项目中的配置文件，如webpack.config.js或package.json中的scripts字段，确保没有修改了默认的生成配置。
尝试重新安装create-react-app。如果以上方法都无效，可以尝试重新安装create-react-app工具，确保使用了最新版本的脚手架工具。

总结：在使用create-react-app生成生产版本时，确实不会生成index.html文件，而是通过自动生成的index.html模板文件来加载打包后的bundle.js文件。如果缺少index.html文件，可以尝试使用正确的命令生成生产版本，检查是否有自定义配置导致了问题，或者重新安装create-react-app工具。

相关搜索:Javascript的新版本。尝试从字符串数组生成图像对象数组时遇到问题 Node.js:尝试运行生产版本时出现此错误:从“../../ _Promise -js/promise”导入核心；SyntaxError:意外标识符为什么当我从jaxws-maven-plugin生成wsdl类时，它们因为缺少ProviderImpl而无法在运行时运行？有关php的段子云虚机租用供应商用云主机的服务商云主机租用供应商云服务器是空间吗云服务器网站搭建云服务器试用半年

相关搜索:

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

有帮助

没帮助

相关·内容

react开发环境搭建

使用 create-react-app 创建一个新的项目，替换 my-app 为你想要的项目名称： npx create-react-app my-app npx 是 npm 5.2.0 及更高版本随附的工具...打开浏览器查看项目你可以在浏览器中访问 http://localhost:3000，你会看到 create-react-app 默认生成的欢迎页面。...这个目录是由 npm 自动生成的，不需要手动管理。 public/ 存放公开静态资源的目录。该目录下的文件会被直接暴露在生产环境中，不会经过 Webpack 处理。...serviceWorker.js 一个用于注册服务工作线程的文件（在创建 PWA 时可以使用）。在最新版本的 create-react-app 中，这个文件可能被移除或不推荐使用。...这些文件都可以移除或不推荐使用 .gitignore 用于指定在使用 Git 版本控制时，哪些文件和目录应该被忽略。例如，node_modules/ 和 build/ 文件夹。

441 0

面向 React 和 Nginx 的 Docker 多阶段构建

建立 React 应用先生成一个简单的 React 应用。要快速开始的话，我们先安装 create-react-app 包，它可以快速生成一个 ReactJS 应用。...以下面的命令全局安装： npm install -g create-react-app 一旦安装完成，就可以用其生成项目。在终端中进入想要建立项目的目录，并执行以下命令。...该命令将准备好 React 应用的生产环境构建产物。也就是说，该命令会生成用来伺服客户端的 index.html 文件和 main.js 文件。...步骤 2 – 接着，我们从 builder 阶段拷贝构建产物到 nginx 所需的位置。...在第一次执行时这会费一点时间，因为所有的基础镜像和依赖项都会被下载。

2.4K1 0

Create React App v3 + Webpack v4 多页应用配置

环境截止写文时（2020年09月22日），使用的环境如下 create-react-app / react-scripts 3.4.3 Webpack 4.42 TypeScript 仓库地址：https...安装、运行 create-react-app # 卸载旧版 create-react-app npm uninstall -g create-react-app # 使用 npx 安装最新版 npx...访问 http://localhost:3000/index.html ? 4....复盘版本、时效性参考网上文章时，需要注意一下文章的时间和依赖库的版本，尤其当有大版本变化时，要慎重，避免花费过多时间在可能错误的方向上；尽可能多花一些时间在时效性较高的资料，从而提升解决问题的概率。...ps：本文之前参考的文章多数是基于 create-react-app v2 的，而实际自己使用的是 CRA v3 版本。错误日志另外一个影响解决速度的原因是：没有报错信息。

1.4K2 0

【原创】不想eject，还咋修改create-react-app的配置？

一、先抛问题许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。...其次，在版本迭代时，如果更新了react、react-scripts、eslint、tsconfig等依赖，有可能会引起版本依赖的问题，即使我们按错误信息修复了之后，项目还是无法运行。...所以我们一般不太建议使用yarn eject的方式暴露create-react-app框架的配置。...三、有需求咋解决实际开发中，我们还是需要更新webpack、babel的配置，比如： antd的按需加载；配置css预处理器 - less；设置alias、externals；生产环境打包-去除...@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。

2.9K4 0

前端工程化之概念介绍

「选定方案」「配置方案」细节「配置完成」根据定制方案「创建项目文件」结束流程常见脚手架工具现在主流的前端脚手架工具有两类：名称模板框架多选项生产支持自定义模板特点 Create-React-App...在开发环境中，要求构建速度快/质量高/便于提升开发效率,而不关注生成文件的大小和访问方式在生产环境中，需要考虑是否需要提供线上Source Map/生成的文件大小/访问方式是否会对页面性能造成影响,最后才考虑质量和构建速度...Source Map 处理插件根据不同规则，实际上 Webpack 是从三种「插件」中选择其一作为 source map 的处理插件。...，调试时只能定位到指定代码所在的行而定位不到所在的列 ---- 不同预设的效果总结分别从「质量」/「构建速度」/「包大小和生成方式」三个角度来分析质量生成的 source map 的质量分为「...级别解释 5 「源码且包含列信息」 4）「缺少列信息的源代码」 3）「Loader 转换后的代码」 2）「生成后的产物代码」 1）「无法显示代码」构建速度 ❝「再次构建」速度都要显著快于初次构建速度

7501 0

create-react-app入门教程

Quick Start（快速入门）全局安装首先确保你电脑上安装最新的 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app...，可以先尝试卸载： npm uninstall -g create-react-app,然后再全局安装。...项目的默认目录： ├── package.json ├── public # 这个是webpack的配置的静态目录 │ ├── favicon.ico │ ├── index.html...serviceWorker.js └── yarn.lock 默认的npm的脚本启动开发 npm start # or yarn start 启动测试 npm test #or yarn test 构建生产版本...HTML模板修改在public目录中有个index.html是单页面应用的基本模板，所有react生成的代码都会注入到此HTML中。所以此处可以添加一些cdn脚本或者全局的html。

2.4K2 1

React-脚手架

什么是脚手架脚手架是一种能快速帮助我们生成项目结构和依赖的工具每个项目完成的效果不同，但是它们的基本工程化结构是相似的既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生成基本的项目模板那么这个帮助我们生成项目模板的工具我们就称之为...'脚手架'create-react-appcreate-react-app 就是 React 的脚手架工具, 它可以快速的帮我们生成一套利用 webpack 管理 React 的项目模板。...安装和使用 create-react-app安装：npm install -g create-react-app使用 create-react-app 创建项目：create-react-app 项目名称...安装和项目相同版本的 webpack 版本即可暴露 webapck 配置npm run ejectReact 脚手架的文档结构通常是这样的：├── node_modules/├── public/│...├── index.html│ └── ...├── src/│ ├── App.css│ ├── App.js│ ├── index.js│ └── ...├── package.json

3832 0

Create React App 源码揭秘

先来了解下使用node_modules模式的机制将依赖包的版本区间解析为某个具体的版本号下载对应版本依赖的tar 报到本地离线镜像将依赖从离线镜像解压到本地缓存将依赖从缓存拷贝到当前目录的node_modules...只需在创建项目时添加--use-pnp参数。...通过create-react-app生成的项目内部引用不了除src外的目录，不然会报错which falls outside of the project src/ directory....，要能构建各种相关模块仓库体积会变大使用monorepo管理的优点一个仓库维护多个模块，不用到处找仓库方便版本管理和依赖管理，模块之间的引用、调试都非常方便，配合相应工具，可以一个命令搞定方便统一生成...CHANGELOG，配合提交规范，可以在发布时自动生成CHANGELOG，借助Leran-changelog

3.6K2 0

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

当你意识到在刚刚部署成功后，却有一个严重bug需要被修复时，问题变得糟糕起来。问题修复起来很简单，但是我们又要花费半分钟才能上线。这不是一个编造的故事。...在生产环境被充分验证之前，不能声称事情已经搞定。这个过程越慢，就必须等待更长的时间才能看到代码是否按预期工作。...更新index.html Create React App创建了一个public文件夹，里面预置了几个文件。...包含在其中的index.html更像是一个模板，在运行react-scripts build时，会被处理并输出到build文件夹。在我们新的esbuild构建中，index.html不需要成为模板。...// public/index.html <!

2.7K2 0

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

build：此脚本负责制作应用程序的生产版本。您将在服务器上使用此脚本。 test：此脚本运行与项目关联的默认测试。 eject：此脚本是create-react-app程序包的高级功能。...该文件夹包括index.html文件，JavaScript文件和CSS文件等。...在部署应用程序的新版本的情况下，创建此链接特别有用：通过创建指向稳定版本的链接，可以在部署其他版本时简化以后交换的过程。如果出现问题，您也可以以相同的方式恢复到以前的版本。...它会尽量使用任何下列文件从目录/var/www/do-react-example-app/build：index.html，index.htm，index.nginx-debian.html，按照优先顺序从前到后...Placeholder for Slack notification 该脚本将转到该文件夹，从最新的master分支中提取代码，安装新的软件包，并构建应用程序的生产版本。请注意!!

8.7K2 0

React 入门学习（五）-- 认识脚手架

在我们的 React 项目中，脚手架的作用与之有异曲同工之妙 React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一...在我之前学习 webpack 的过程中，每次都需要配置 webpack.config.js 文件，用于配置我们项目的相关 loader 、plugin，这些操作比较复杂，但是它的重复性很高，而且在项目打包时又很有必要...安装 React 脚手架首先确保安装了 npm 和Node，版本不要太古老，具体是多少不大清楚，建议还是用 npm update 更新一下然后打开 cmd 命令行工具，全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目在当前的文件夹下执行 create-react-app hello-react 快速搭建项目再在生成好的 hello-react..." /> 第12行苹果手机触摸版应用图标第13行应用加壳时的配置文件

4792 0

React 入门学习（五）-- 认识脚手架

在我们的 React 项目中，脚手架的作用与之有异曲同工之妙 React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一...在我之前学习 webpack 的过程中，每次都需要配置 webpack.config.js 文件，用于配置我们项目的相关 loader 、plugin，这些操作比较复杂，但是它的重复性很高，而且在项目打包时又很有必要...安装 React 脚手架首先确保安装了 npm 和Node，版本不要太古老，具体是多少不大清楚，建议还是用 npm update 更新一下然后打开 cmd 命令行工具，全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目在当前的文件夹下执行 create-react-app hello-react 快速搭建项目再在生成好的 hello-react..." /> 第12行苹果手机触摸版应用图标第13行应用加壳时的配置文件

5282 0

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

一、使用 create-react-app 构建 1、全局安装 create-react-app 使用以下命令进行全局安装： npm install -g create-react-app 2、运行项目创建命令...npx create-react-app my-react-ts-app --typescript 注：请查看根目录下的的 package.json 文件确保React版本不低于16.7.0-alpha...二、手动创建手动创建步骤比较繁杂，但是能够从0~1的那种体验，还是蛮有成就感的。...添加 React 的 TypeScript 类型依赖，命令如下所示： npm install @types/react @types/react-dom --save-dev 7、在dist目录下创建index.html...webpack-dev-server --env development", "build": "webpack --env production" }, ... } 11.2 、打包把代码部署到生成环境里

2.2K1 0

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

开发者面对 eject 时的主要挑战一是无法再享受 CRA 之后的新特性了，二是在团队内同步设置会非常低效。... ); } } export default App; 然后，到 react-scripts/template/public 目录中，打开 index.html...template 目录中创建一个内容如下的 .env.example 文件： REACT_APP_EMPLOYEE_ID='44566' REACT_APP_POSITION_ID='ENGR' 一旦用这个版本的...、将 repository 的值指向正确的地址（本例中为 unicodelabs/create-react-app）。现在，从终端中进入 react-scripts 目录： ?...总结好的程序员会日常不断地打磨他们的工具以提高生产力。CRA 是一个快速创建 React 应用的利器。

1.4K1 0

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

Vue 有一个与React 的 create-react-app 非常相似的官方CLI 工具：Vue CLI 。Vue CLI 为新开发的应用程序提供了脚手架。...因为我们一旦将项目打完包并让其正式开工干活时，你会发现浏览器刷新时居然会找不到地址，没错！是找不到地址！这哪里还有俊的痕迹？ ? 原因：URL 匹配不到任何静态资源。...解决方法：通过重写URL的方式对服务器进行配置，将匹配不到的URL，全部指向app所依赖的页面：index.html。...---- 二、proxy代理跨域请求只有在生产环境中有效 proxy在vue-cli3.0以上，可以通过修改vue.config.js来配置，例如： module.exports = { devServer...但是打包后在生产环境接口会报错404！原因：打包以后生成的是一堆静态资源，哪里还会有proxy的身影？解决方法：通过Node.js在生产环境中实现proxy。

1.3K7 0

在Linode上部署React应用程序

由于基本的React应用程序是静态的（它由已编译的HTML，CSS和JavaScript文件组成），因此使用Rsync可以轻松地从本地计算机部署到Linode 。...如果你没有，可以使用create-react-app快速生成应用程序。...listen 80; listen [::]:80; root /var/www/mydomain.com; ## Modify this line index index.html.../deploy 出现提示时输入你的Unix密码。 5.在浏览器中，输入你的Linode域名或公共IP地址。如果部署成功，你将看到你的React应用程序。...下一步部署可以是一个复杂的主题，在生产环境中需要考虑许多因素。本指南旨在成为个人项目的简单示例，并不一定适用于大规模的生产环境应用程序。

2.7K4 0

create-react-app初探

─ README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html...还能为我们在项目开发，编译时进行构建，充当builder的作用。...build使用webpack进行编译打包，生成生产模式下的所有脚本，静态资源 react-scripts test执行所有测试用例，完成对我们每个模块质量的保证这里，我们针对start这条线进行追踪...因为create-react-app my-app之后通过模版生成的项目中入口脚本被放置在src/index.js，而入口html被放置在public/index.html，所以需要对这两个文件进行检查...其实，整个流程我们看到这里，已经结束了，我们知道WDS和webpack配合，可以进行热更，file changes watching等功能，我们开发时，通过修改源代码，或者样式文件，会被实时监听，然后webpack

1.3K1 0

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

前言我们都知道 React 非常优秀并且非常出色，我们可以使用 create-react-app 快速搭建一个前端应用。...这是因为在发出 Fetch 请求时发生了跨域请求。为了解决这个问题：方案一更改接口允许跨域，我们需要在安装 cors 这个包: npm install --save cors 更改 ..../client/build'))) // 其他任何没处理的接口都返回 index.html app.get('*', (req, res) => { res.sendFile(path.resolve.../client/build', 'index.html')) }) } npm 安装 cross-env这个包，区分开发环境还是生产环境..../api/server.js" } } 方案三开发环境还是使用 proxy 代理，生产环境使用 nginx 反向代理实现。

3K4 0

React 学习笔记之创建 React 项目

安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app...而这个组件渲染到什么位置则是第二个参数 document.getElementById(‘root’) 决定的，它从 index.html 中获取到了 root 节点，并将 App 插入到 root 节点下... ); } } export default App; 编译生产环境的项目 // 编译项目，会在项目目录下生成一个 build 的文件夹。...将编译项目运行在本地查看效果 pushstate-server build // Listening on port 9000 (http://0.0.0.0:9000) 执行以上命令后，会产生一个编译后的生产环境的代码

7241 0

webpack4学习+配置实现简单的多页面jq开发脚手架

后来开发的时候基本写 react 都是用的 create-react-app 或者找别人的搭好的脚手架用。 webpack4 刚出也不算久，重新学习加复习下 webpack 的一些知识。...一些升级到 webpack4 的 tips: extract-text-webpack-plugin 必须 4+版本才可以在 webpack4 中用 webpack4 中必须提供 mode 参数，process.env.NODE_ENV...- index.html - index.css 每个 src 下的一级子目录都是一个页面，该目录内的 index.html 为 html 文件，index.js 是入口文件我们在 webpack...代码规范化 todo 代吗格式化 .editorconfig + vscode 插件 Prettier - Code formatter 开发环境和生产环境两份配置 webpack -config ..../webpack.xxx.js webpack.base.config.js 公用配置 webpack.dev.config.js 开发环境配置 webpack.prod.config.js 生产环境配置

9641 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭