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

更新时间：2023年08月23日 15:37:07 作者：爱上你...家菜包

React项目执行build命令后,在本地服务器打开页面是空白的,本文主要介绍了React项目build打包页面空白的解决方案,感兴趣的可以了解一下

问题描述

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

如下图所示

解决方法

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

{
  "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;
}

到此这篇关于React项目build打包页面空白的解决方案的文章就介绍到这了,更多相关React build打包页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react build 后打包发布总结

React+Typescript创建项目的实现步骤
通过React组件库和TypeScript的强类型特性,开发者可以创建出具有优秀用户体验和稳定性的Web应用程序,本文主要介绍了React+Typescript创建项目的实现步骤,感兴趣的可以了解一下
2023-08-08
React组件间通讯传值实现详解
这篇文章主要介绍了React组件间通讯传值，react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理
2022-11-11
解析React中useMemo与useCallback的区别
这篇文章主要介绍了React中useMemo与useCallback的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
React-router4路由监听的实现
这篇文章主要介绍了React-router4路由监听的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
React state状态属性详细讲解
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态
2022-09-09
基于react hooks,zarm组件库配置开发h5表单页面的实例代码
这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React操作真实DOM实现动态吸底部的示例
本篇文章主要介绍了React操作真实DOM实现动态吸底部的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
React编程中需要注意的两个错误
React可以说是前端的先驱者,它总是会引领整个前端的潮流。但我们在使用也经常会遇到错误，下面这篇文章主要给大家介绍了关于React编程中需要注意的两个错误，需要的朋友可以参考下
2021-05-05
React组件三大属性之state,props,refs
这篇文章主要介绍了React组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
详解vant2 自动检查表单验证 -validate
这篇文章主要介绍了vant2 自动检查表单验证 -validate,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10