起因:build上传gitee,启用路由需要404.html自动跳转

当前环境 create-react-app 搭建的架子

解决方案

由于默认的时候把build.js打包,无法查看,只好eject

有不需要eject的方法,但是为了更好的研究学习,就得eject

  1. npm run eject
  2. 找到 script/build.js
  3. 找到编译index.html的命令,然后在生成index.html之后进行404.html文件的copy
  4. 添加copy命令 fs.copyFileSync('build/index.html', 'build/404.html');

思路分析

  1. 先找 build.js
  2. 找copy函数 copyPublicFolder
  3. 找生成index.html函数 return build(previousFileSizes);
  4. 找生成index.html后的then()
  5. 找到插入位置前 console.log(chalk.green('Compiled successfully.\n'));

react build 后,打包后自动将index.html copy 404.html - create-react-app 创建的项目的更多相关文章

  1. mpvue使用vant Weapp运行npm run build命令打包后失效

    最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架—— vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...

  2. vue、react配置gzip打包后,删除源文件deleteOriginalAssets: true,nginx需要的配置

    1.删除源文件后,配置了gzip,当配置gzip删除源文件后,解决前端history问题,就会出现所有的都返回html,请求js.css也会返回html,页面会报错,如下配置即可 location / ...

  3. react使用BrowserRouter打包后,刷新页面出现404

    文档 https://gkedge.gitbooks.io/react-router-in-the-real/content/apache.html nginx nginx.conf server { ...

  4. 设置build.gradle打包时自动加时间

    在build.gradle中添加以下函数: def releaseTime() { return new Date().format("yyyyMMddHHmm", TimeZon ...

  5. vue开发完成后打包后图片路径不对

    用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包 ...

  6. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  7. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  8. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  9. vue打包后.woff字体文件路径问题处理

    在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决

  10. 【微信】微信小程序 新建页面目录后,怎么自动生成目中的的四个基本文件呢? 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages "pages/module/module" 对应的 WXML 文件

    如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+ ...

随机推荐

  1. 1.1 C++ STL 字符串构造函数

    String 字符串操作容器是C++标准中实现的重要容器,其主要用于对字符串的高效处理,它和C风格中的string.h并不是同一个库,两个库有极大的差距,C库中的string.h主要面向过程提供一些处 ...

  2. Linux的信号管理 [补档-2023-07-30]

    信号 11-1简介: ​ 信号只是表示某个信号,不可以携带大量信息,信号需要满足特点的条件才会产生.是一种特别的通信手 段. 11-2 信号机制: ​ 假设有两个进程A,B,现在进程A给进程B发送信号 ...

  3. 【Flink入门修炼】1-1 为什么要学习 Flink?

    流处理和批处理是什么? 什么是 Flink?为什么要学习 Flink? Flink 有什么特点,能做什么? 本文将为你解答以上问题. 一.批处理和流处理 早些年,大数据处理还主要为批处理,一般按天或小 ...

  4. Flink CDC写入数据到kafka几种格式

    Flink CDC写入kafka几种常见的数据格式,其中包括upsert-kafka写入后正常的json格式,debezium-json格式以及changelog-json格式. upsert-kaf ...

  5. NC20951 网络优化

    题目链接 题目 题目描述 <梦三国2>是一款3D MOBA类网游.游戏继承<梦三国>的三国文化背景和基础玩法,并加入许多全新地图和全新竞技玩法.由于人气高,游戏在线人数与日俱增 ...

  6. 树莓派开发笔记(十六):树莓派4B+安装mariadb数据库(mysql开源分支)并测试基本操作

    前言   树莓派使用数据库时,优先选择sqlite数据库,但是sqlite是文件数据库同时仅针对于单用户的情况,考虑到多用户的情况,在树莓派上部署安装mariadb数据库服务(mysql的开源分支), ...

  7. JavaScript之原生ajax && jQuery之ajax

        ajax提供了异步访问服务器的方法,使页面无须刷新就可以更改页面内容,在实际情况中使用原生的情况较少但是原理需要掌握,一般都是使用jquey更轻量级的实现ajax但是原理是共同的.     原 ...

  8. Oracle不走索引的原因

    Oracle数据库操作中,为什么有时一个表的某个字段明明有索引,当观察一些语的执行计划确不走索引呢?如何解决呢?本文我们主要就介绍这部分内容,接下来就让我们一起来了解一下 . 不走索引大体有以下几个原 ...

  9. EL表达式处理字符串

    示例 JSP页面页头添加 <%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c"%> <%@ ta ...

  10. jvm调优监控工具jps、jstack、jmap、jhat、jstat使用详解

    目录 前言 jps(Java Virtual Machine Process Status Tool) jstack jmap(Memory Map)和jhat(Java Heap Analysis ...