React项目build打包后,页面空白的解决方案

news/2024/7/15 17:26:37 标签: react.js, javascript, 前端, 前端框架

问题描述:

React项目执行 build 命令后,在本地服务器打开页面 是空白的,而且控制台报错

如下图所示 

 解决方法

打开根目录下的 package.json 文件,添加如下代码

javascript">{
  "name": "testproject",
  "version": "0.1.0",
  "homepage": "./",      // 加上这行代码,然后重新 build 即可
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^5.2.5",
    ...
  }
    ...
}

重新 build 之后,启用本地服务 打开 index.html 文件(本文中用 Live Server 插件启用本地服务,你也可以用其它的),如下图所示

 打开后,页面可正常访问,如下图所示

 注意:页面虽然可以正常访问,但如果在地址栏 直接输入URL 回车,就会变成404页面的。这种情况没关系,当你最后把项目 部署到正式服务器上时,在nginx中配置以下代码即可。

location / {
    try_files $uri /index.html;
}

 


http://www.niftyadmin.cn/n/4962000.html

相关文章

ubuntu or kylinos软件安装错误的终极解决方案

一、前言 所谓的软件安装,不管是那个系统,都是通过一定的方法把文件从源复制到目的,然后做一些配置工作,使其能正常的运行,卸载。 对于Linux来说,其目录的高度组织化,以及各软件依赖关系的复杂性,使得软件包数据库显得非常重要。 简单来说,软件包数据库最主要记录两…

【用一个故事介绍Java的封装继承多态】

曾经有一只名叫小红的猫咪,她非常喜欢吃鱼。每当主人给她放一个鱼缸时,小红总是尽情地享受吃鱼的快乐。 某一天,小红的主人给她放了一个新的鱼缸,但这一次主人却为鱼缸设置了密码保护。小红虽然很想吃鱼,但却无法打开…

springBoot防止重复提交

两种方法, 一种是后端实现,较复杂,要通过自定义注解和AOP以及Redis组合实现 另一种是前端实现,简单,只需通过js,设置过期时间,一定时间内,多次点击按钮只生效一次 后端实现 自定义注…

JDK 核心jar之 rt.jar

一、JDK目录展示 二、rt.jar 简介 2.1.JAR释义 在软件领域,JAR文件(Java归档,英语:Java Archive)是一种软件包文件格式,通常用于聚合大量的Java类文件、相关的元数据和资源(文本、图片等&…

Vant 4.6.4发布,增加了一些新功能,并修复了一些bug

导读Vant 4.6.4发布,增加了一些新功能,并修复了一些bug等。 新功能 feat(area-data): 更新芜湖的县区数据,由 nivin-studio 在 #12122 中贡献feat(Locale): 添加塞尔维亚语到国际化,由 RogerZXY 在 #12145 中贡献feat(ImagePreview): 添加 c…

前端代码规范

1 husky husky用于绑定git hooks,在指定时机执行想要的命令 {"husky": {"hooks": {"pre-commit": "lint-staged" }} }需要手动修改.husky文件内容: . "$(dirname -- "$0")/_/husky.sh"n…

Spring 为什么使用三级缓存解决循环依赖

文章目录 前言1. 什么是循环依赖1.1 互相依赖1.2 递归依赖 2. Sping中循环依赖有什么问题?3. 什么是三级缓存4. Spring 可以解决哪些情况的循环依赖? 二级缓存作用——普通循环依赖实操环节1. 实例化类A对象2. 实例化类B对象3. B对象完成创建4.继续创建A…

提供一个sql关联优化的思路

1、 做 表关联的时候,进行 时间范围的二次过滤; 就是 两个表的数据发生的范围 关联到 2张表上,主要的思路 就是 尽量减少 扫描的数据范围 比如 SELECT a.*, b.* from a left join b on a.bid b.id and b.time a.time -- left …