ant design pro的react项目build之后页面为空白解决方法

原创 已于 2024-02-29 10:39:10 修改 · 1.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #前端框架

于 2024-02-27 20:45:51 首次发布
文章讲述了在使用Yarn构建项目时遇到的index.html空白问题，通过编辑config.ts并配置history和publicPath来修复。

一、问题
执行yarn build之后访问dist文件夹中的index.html文件为空白
二、解决方法
找到config文件夹中的config.ts文件
在这里插入图片描述
添加代码

history: {
  type: 'hash'
},
publicPath: './',

在这里插入图片描述
修改完重新build一下就好了
在这里插入图片描述

React页面显示空白问题解决方案
LogicGuruX的博客
10-09 1531
检查你的代码，尤其是与页面显示相关的部分，以确保没有这些常见错误。检查网络请求的URL和参数：确保你的网络请求的URL和参数正确无误。确认你正在向正确的API端点发送请求，并且请求的参数是正确的。检查组件的生命周期方法：如果你在组件中使用了生命周期方法，确保这些方法正确地被调用，并且没有出现错误。检查组件的导入和使用：确保你正确导入和使用了所需的组件。检查样式表的导入：确保你正确地导入了所需的样式表，并且没有任何错误。检查组件的渲染逻辑：确保你的组件的渲染逻辑正确无误。
react+antpro 打包后生成大体积文件之优化
woyaoshengzhang的博客
04-09 2287
概述 使用antpro 框架做了一个react 项目，打包后umi.js文件体积差不多有1.4M。后来使用gzip压缩方式，将其压缩到421kb，大大缩短加载时间。 查看项目文件大小 可以通过两种方式，查看具体产生了哪些大文件。 1. 使用开发者工具的Network，可以查看浏览器加载了哪些文件及用时。 2. 使用npm 自带的分析工具，运行命令后后自动弹出分析结果网页。 npm run analyze Stat -- 转换前的体积 Parsed -- 最终打包体积 Gzippe
ant design pro v5子路由页面不显示的问题
weixin_45830447的博客
08-30 3342
我一开始的路由配置： //config/route.js export default [ { path: '/', redirect: '/food', }, { name: 'food', icon: 'CoffeeOutlined', path: '/food', component: './Food', }, //主要在这个地方配置了子路由list和history { name: 'material', i
解决Ant Design Pro项目构建后首次加载白屏问题的实践方案
最新发布
gitblog_00494的博客
09-11 320
在Ant Design Pro项目开发中，很多开发者会遇到一个常见问题：项目构建后首次加载时出现白屏现象。这个问题通常发生在SPA（单页应用）中，由于JavaScript包体积较大，在资源加载完成前页面无法渲染内容，导致用户体验不佳。 ## 问题分析 通过技术分析，我们发现问题的核心原因在于： 1. **DOM加载顺序问题**：传统的loading.js脚本被放置在head中执行时，目标DO...
react在ant-design-pro的基础上,打包部署页面为空白怎么办?
m0_70947033的博客
01-22 893
在config.ts中加base和publicPath。这个路径要是你部署上线的路径。
ant design pro启动白屏
weixin_49641121的博客
07-02 1645
报错Error: Absolute route path “/*” nested under path “/user” is not valid. An absolute child route path must start with the combined path of all its parent routes.无意间看见了一个文章，注释掉config下routes的404即可。安装依赖后启动，访问界面是白屏。
精选资源
react-admin:基于antdesign的管理后台项目
04-22
Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的： 开始项目 npm start 建立项目 npm run build 检查代码样式 ...
React Admin 前端脚手架之ant-design-pro
西京刀客
01-04 3442
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
React降级配置及Ant Design配置详解
10-17
这个过程旨在帮助开发者理解如何在React项目中进行兼容性调整和UI框架的集成，同时提供了一种方法来优化资源加载，提高应用性能。在实际开发中，根据项目需求和团队规范，可能还需要考虑其他方面的配置，例如错误...
基于Ant Design Pro的React股票市场项目
其核心依托于React技术栈，并深度融合Ant Design Pro这一由蚂蚁集团推出的企业级中后台前端解决方案，为开发者提供了一套开箱即用的UI组件库与工程化架构。 首先，从标题“react-stock-market”可以明确得知，这是...
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
ant design pro build 部署空白问题
zyzhan
03-02 1606
ant design pro build 部署空白问题 在ngnix中加入伪静态配置即可解决 /src/router/index.ts 使用HASH则不用配置 location / { # 用于配合 browserHistory使用 try_files $uri $uri/ /index.html; # 如果有资源，建议使用 https + ...
react build后页面空白，报错
记录本身，即已是反抗
09-30 1824
主要有以下几种可能： 1、在打包之前,在package.json中private下(位置任意)添加"homepage": “./” 2、如果使用了路由，将项目中的引用路由时候的BrowserRouter改为HashRouter 然后再打包一下应该就完事了，这样还不行，你滴我 ...
React项目build打包后，页面空白的解决方案
苍老师背后的男人
08-23 3402
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
ant design pro 打包空白_给你代码：ant-desgin-vue使用
weixin_39918690的博客
11-25 686
安装 推荐使用vue-cli安装 npm install -g @vue/cli安装完毕安装ant-designnpm install -g ant-design-vue 然后就可以使用了使用 import 'ant-design-vue/dist/antd.css';import Antd from 'ant-design-vue';Vue.use(Antd); 安装默认如果编译的话(全部引入)...
react部署之页面空白
weixin_30889885的博客
02-22 1306
react部署之页面空白 问题：create-react-app build打包后，页面出现空白。 可能一： 控制台报错，js等文件找不到（404） 文件路径问题，只需修改package.json文件，添加 "homepage":".", 位置： 可能二： 如果添加后没有报错，但还是页面空白。可尝试将文件部署在服务器根目录上，如果根目录可以打开，即可能是服...
react发布build页面空白解决
sawadikaer的博客
11-29 1281
这是一章我自己防止我忘记如何发布所写的一篇文章，网上类似的很多但是总有一些特殊情况， npm run build 以后会出现一个文件夹build,但是在之前我们要现在package.json文件中加上"homepage":"./" 斜杠取决于你们，网上有人加有人不加，（ps:本人是一个刚入职的前端小萌新，有什么错的地方请帮忙改正，谢谢） 我加上以后发现并不能解决这个问题，然后又在网上寻找，最后找到...
antdpro complete版 启动报错 白屏 Absolute route path “/*“ nested under path “/user“ is not valid.
qq_45361382的博客
02-11 4543
antdpro框架start成功后，页面出现白屏， 控制台出现Absolute route path "/*" nested under path "/user" is not valid.
AntDesign Pro mfsu 导致的页面无法加载问题及解法
tomcat的专栏
12-18 1121
问题虽然解决了，但是这个 mfsu 是个什么，我找到了如下文档：大概说的是，这是一种加速机制，应用热更新时对依赖就不用编译了，提升启动效率。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值