react build后页面空白，报错

最新推荐文章于 2024-02-27 20:45:51 发布
原创 最新推荐文章于 2024-02-27 20:45:51 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #前端 #页面空白

本文主要介绍了两种解决React应用部署时遇到的路径错误问题的方法。首先，可以在package.json文件中添加homepage:“./”。其次，若应用使用了路由，可以将BrowserRouter替换为HashRouter。这些方法有助于确保应用在服务器上正确运行。

主要有以下几种可能：
1、在打包之前,在package.json中private下(位置任意)添加"homepage": “./”
2、如果使用了路由，将项目中的引用路由时候的BrowserRouter改为HashRouter

然后再打包一下应该就完事了，这样还不行，你滴我

JSX 常见错误与解决方案：避免 React 开发中的坑
AI架构全栈开发实战笔记
07-10 1111
本文聚焦 React 开发中最容易出错的 JSX 语法场景，覆盖从基础语法到高阶用法的常见问题。无论你是刚入门 React 的新手，还是想查漏补缺的中级开发者，都能通过本文快速掌握避坑技巧。本文先通过“小明的开发故事”引出 JSX 错误的常见场景，再拆解 8 类核心错误（附错误代码+修复方案），最后结合实战案例和工具推荐，帮你建立“防坑-排查-修复”的完整能力。JSX 是 React 的 UI 描述语法，需遵守“包裹、闭合、属性翻译”三大规则。JSX 会被编译为，错误本质是编译/运行时不符合规则。
RN（React Native）技术应用中常出现的错误及解决办法
在全栈和前端徘徊的程序员
06-22 1349
React Native开发常见问题及解决方案摘要：跨平台开发中常遇到网络请求失败（需检查URL和配置权限）、样式错乱（确认CSS属性和布局）、模块缺失（重装依赖和清除缓存）、热重载失效（检查结构和缓存）等问题。原生模块调用、界面异常、构建失败（iOS/Android配置问题）以及状态管理错误也是高频痛点。建议通过官方文档验证功能支持，使用调试工具排查，并确保正确配置原生环境。
react发布build页面空白解决
sawadikaer的博客
11-29 1282
这是一章我自己防止我忘记如何发布所写的一篇文章，网上类似的很多但是总有一些特殊情况， npm run build 以后会出现一个文件夹build,但是在之前我们要现在package.json文件中加上"homepage":"./" 斜杠取决于你们，网上有人加有人不加，（ps:本人是一个刚入职的前端小萌新，有什么错的地方请帮忙改正，谢谢） 我加上以后发现并不能解决这个问题，然后又在网上寻找，最后找到...
react部署之页面空白
weixin_30889885的博客
02-22 1306
react部署之页面空白 问题：create-react-app build打包后，页面出现空白。 可能一： 控制台报错，js等文件找不到（404） 文件路径问题，只需修改package.json文件，添加 "homepage":".", 位置： 可能二： 如果添加后没有报错，但还是页面空白。可尝试将文件部署在服务器根目录上，如果根目录可以打开，即可能是服...
ant design pro的react项目build之后页面为空白解决方法
Misnice的博客
02-27 1765
ant-design-pro
React页面空白问题
han_start的博客
08-30 5428
前言 有时，当我们使用react-router模块在路由切换时会出现页面空白的情况，这次就将该情况讲解清楚并解决。 出现的问题 下面，我们直接上有问题的代码： <Switch> <Route path={"/"} component={loadable(() => import("./App.jsx"))} /> <Route path={"/home"} component={loadable(() => import("./views/Home/
React（四）create-react-app IE打开以及打包部署后页面空白问题
zhengjie0722的博客
04-11 1613
（1）本地测试 本地测试环境解决IE页面空白问题需要安装babel-polyfill yarn add babel-polyfill npm install babel-polyfill 然后再主入口文件index.js中引入babel-polyfill包 import 'babel-polyfill' （2）服务器部署 在package.json文件中添加 "...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html...
vue3 vite打包后页面控制台报错Access to script at ‘file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
WDY2018312901的博客
09-17 2319
vue3 vite打包后页面控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
除了上述方法，还有哪些可能导致前端项目在宝塔环境部署后页面空白？
最新发布
12-07
除了已知的端口未开放、浏览器缓存问题和静态资源访问问题外，前端项目在宝塔环境部署后页面空白还可能有以下原因： ### 代码构建问题 - **构建命令错误**：前端项目在本地开发完成后，需要通过特定的命令进行构建...
React项目build之后资源文件路径不正确或打开空白页的问题及简易解决方法
大IT职男日志
09-09 3379
找到node_modules -> react-scripts -> config -> paths.js 修改 function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'....
【react】脚手架build后，静态页面空白
Voiceu的博客
07-05 1201
有两个原因： 一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源 二是可能使用了BrowserRouter,要改为HashRouter 本人的两个问题都出现了 首先在package.json里面添加 “homepage” ： " . " 其次就是修改Router了 然后再build就行了 ...
React中使用路由组件中页面显示空白
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
11-25 4183
Route和Routes组件显示异常？页面空白？如果你遇到这些问题看这篇文章就对了！
react BrowserRouter情况的配置，部署指定路径出现页面空白
diaojw090的博客
06-10 3562
报错： 顺序问题 解决方法：引入多个组件时，顺序一=一致。
React路由跳转，显示空白页面
weixin_45868552的博客
04-24 2459
出现这种情况的原因是，在该子路由的上一级路由里，使用了exact，这会导致父级路由路径不匹配，从而子路由显示空白页面
React项目中发生空白但不报错的原因分析和解决？
努力的鋜
11-24 1978
在react中如何捕获错误，如何调试代码，如何使用一些工具来进行错误分析，如何做一些错误排查。怎么解决
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3658
解决create-react-app打包后, 本地打开页面空白的问题
React项目build打包后，页面空白的解决方案
苍老师背后的男人
08-23 3415
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
react 执行 yarn build 页面无法显示
weixin_34040079的博客
03-17 1941
资源文件路径问题 　　如果你使用create-react-app创建项目，执行命令 yarn build 后，直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题，打开console后会看到js、css、svg等文件的路径出现问题。 项目结构：（build文件夹） 解决方案： 　　打包之前在package.json中，添加了 "homepage": "."...
React个人页面项目入门与构建指南
执行该命令后，CRA 将把所有隐藏的配置文件（如 webpack.config.js、babel.config.js、eslint.config.js 等）暴露到项目根目录中，并将原本封装在 react-scripts 中的依赖项直接写入 package.json 文件。虽然这赋予...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值