起因: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. MySQL 之多表连查(精简笔记)

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...

  2. 【分享】从Mybatis源码中,学习到的10种设计模式

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:小镇卷码家 总有不少研发伙伴问小傅哥:"为什么学设计模式.看框架源码.补技 ...

  3. 用arr.filter数组去重

    let res = arr.filter((item,index,arr)=>{ //返回找到的下标,等于 下标 return arr.indexOf(item) === index; }) c ...

  4. 优化算法之梯度下降|Matlab实现梯度下降算法

    题目要求: 使用Matab实现梯度下降法 对于函数: min ⁡ f ( x ) = 2 x 1 2 + 4 x 2 2 − 6 x 1 − 2 x 1 x 2 \min f(x)=2 x_{1}^{ ...

  5. CF1295

    A 用计算器式显示数字,可以显示 \(n\) 段.可以显示的最大数字是多少? 如果用了一个需要至少四段的数字,一定不如把这个替换成两个 \(1\) 好. 如果一共可以用偶数个,一定是全部 \(1\). ...

  6. Nginx+uwsgi+ssl配置https

    Nginx+uwsgi+ssl配置https 使用原始django,太过于笨重和杂多nginx是一个轻量级的web服务器,在处理静态资源和高并发有优势uwsgi是一个基于python的高效率的协议,处 ...

  7. JOISC 2022 记录

    Day1 T1 Jail 操作很类似华容道.由于这题是可以树,同时每一个人走的都是最短路,这也就意味着不会出现通过好多个人一起的挪动来匀出空间. 所以如果合法,必然存在一种方案是每一次直接将一个人挪到 ...

  8. 从 KeyStore 中获取 PublicKey 和 PrivateKey

    KeyStore(译:密钥存储库) 代表用于加密密钥和证书的存储设施. KeyStore 管理不同类型的 entry(译:条目).每种类型的 entry 都实现了 KeyStore.Entry 接口. ...

  9. 51单片机封装库HML_FwLib_STC89/STC11

    HML_FwLib_STC89/11 项目地址 https://github.com/MCU-ZHISHAN-IoT/HML_FwLib_STC89 https://github.com/MCU-ZH ...

  10. golang常用库包:redis操作库go-redis使用(03)-高级数据结构和其它特性

    Redis 高级数据结构操作和其它特性 第一篇:go-redis使用,介绍Redis基本数据结构和其他特性,以及 go-redis 连接到Redis https://www.cnblogs.com/j ...