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打包页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决antd的Table组件使用rowSelection属性实现多选时遇到的bug
这篇文章主要介绍了解决antd的Table组件使用rowSelection属性实现多选时遇到的bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
服务端渲染(SSR)是现代React应用开发中的重要技术,它能显著提升应用的性能、SEO和用户体验,本文将深入探讨React SSR的原理、实现方式和最佳实践,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了浅谈对于react-thunk中间件的简单理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了React中useState值为对象时改变值不渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态2022-11-11
react-router browserHistory刷新页面404问题解决方法
本篇文章主要介绍了react-router browserHistory刷新页面404问题解决方法，非常具有实用价值，需要的朋友可以参考下2017-12-12
本文详细介绍了React中的双缓存Fiber树机制,包括概念、核心流程、优势以及面试中的常见问题和标准回答,通过"通俗+专业"的方式,帮助面试者全面理解React的性能优化体系,掌握双缓存Fiber树的关键点,感兴趣的朋友跟随小编一起看看吧2026-03-03
本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧2021-07-07
React中useCallback useMemo使用方法快速精通
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender2023-02-02
state 中可以保存任意类型的JavaScript值，包括对象，但是，不应该直接修改存放在 React state 中的对象，这篇文章主要介绍了React 18更新state中的对象,需要的朋友可以参考下2023-08-08
最新评论