react打包项目的时候页面空白

最新推荐文章于 2023-10-13 16:40:10 发布
最新推荐文章于 2023-10-13 16:40:10 发布
阅读量807 收藏 2
点赞数
文章标签： react react打包空白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41956361/article/details/95014188
版权

样式图
在这里插入图片描述
并且控制台报错

解决方法和问题原因
路径错误，在weback.json里面添加
在这里插入图片描述

成功图例

在这里插入图片描述

个人github:https://github.com/webxingkong
如有不正确的地方请指教联系修改，后期将不断更新，谢谢你们的支持

争取一行
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react build 后打包发布总结
10-18
2. 在运行`npm run build`后，直接打开生成的`index.html`可能会出现空白页面，这是因为默认的路径配置问题。为解决这个问题，可以在`package.json`中添加 `"homepage": "."`，这将确保路径配置为相对路径，从而解决...
react umi中使用svg线上图片不加载问题
MYG_G
06-28 1648
react中使用svg的几种方法，解决svg加载失败问题
Create-react-app创建的项目打包后页面空白的解决方法
X北辰北的博客
11-06 2272
问题描述： 当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。 解决方法： 此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下： "homepage": "./",
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
qq_42780323的博客
11-08 8489
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。 解决办法，在page.json文件里面增加一行："homepage": "./", 2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 解决方法： react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径 我的文件位置/WEB/reactdemo, :打开页面浏览器显示的地址：htt.
React项目build打包后，页面空白的解决方案
苍老师背后的男人
08-23 2226
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
React 打包后白屏，资源找不到
LueLueLue77的博客
07-28 1378
记录下最近在打包react项目的时候遇到页面白屏，资源找不到的情况
h5 移动端空白项目 模板
10-09
在实际开发中，H5移动端项目可能会结合各种前端框架和库，如React、Vue或Angular，以提升开发效率和应用性能。此外，还可以利用工具如Babel将ES6+代码转换为浏览器兼容的JavaScript，以及PWA（渐进式Web应用）技术，...
react-route+webpack项目工程
06-01
现在，你的项目已经集成了React、Webpack和React-Route，可以根据URL动态渲染不同的页面。 通过这个过程，你可以创建一个功能完善的React应用，具有路由管理和模块化的优点。随着项目的发展，还可以进一步优化...
react-layout:该项目是 react.JS 最佳布局
05-31
8. **Webpack或Parcel**：为了构建和打包项目，开发者可能使用Webpack或Parcel这样的模块打包工具，它们可以处理依赖的导入、代码分割、优化和生成生产环境的文件。 9. **测试**：考虑到项目的质量保证，可能包含...
react-reactsnap一个单页面应用程序的零配置静态预渲染器
08-15
React是目前非常流行的JavaScript库，用于构建用户界面，特别是单页面应用程序（SPA）。...在实际项目中，开发者应根据项目需求和特性来决定是否使用`react-snap`，或者是否需要寻找更定制化的解决方案。
在封装好svg的项目中使用自己的新svg图标不显示问题
weixin_41796860的博客
08-29 1779
最近我接手了一个已经完成的项目（这个项目使用的是封装好的svg）优化其中的某些地方，其中一个就是将项目原来的有些图标替换为自己的，出了点小插曲， 插曲一 咦？我的图标放进去咋就不显示呢？！！ 定位了好久都没有头绪，怎么就出不来？等下午太阳下去了，我的电脑屏幕不反光了，才发现其实是有图标显示的，只是颜色太浅没看见··~~ 插曲二 那我的图标为啥颜色和人家的不一样呢，F12查看对比样式，尝试修改都无...
关于react里的 img导入svg图片在线上不能正常显示的问题
csdn_smartyang的博客
02-01 2613
一般我们会在webpack里配置 但是我遇到配置完也不能在线上正常显示，这里已经找不出其他原因，但是png能够显示，所以我考虑到换成png，但是放大会模糊，这也是这个的缺点，于是我只好转成base64去显示 可以在线上手动转换后引入 https://base64.guru/converter/encode/image/svg <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4K
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3130
解决create-react-app打包后, 本地打开页面空白的问题
初始react项目打包空白问题
最新发布
a1009698473的博客
10-13 127
例如：React 项目打包后index.html空白问题。
React项目发版后部分用户出现白屏现象
weixin_42947716的博客
06-30 2659
系统每次发版之后，会有少部分用户出现的情况，需要清除浏览器缓存，开无痕浏览或者重新加载才能正常访问
react项目打包后，浏览器直接打开dist/index.html页面出现空白
zsy_1991的博客
03-10 8664
问题解决 下面 umi 的两个配置解决了问题。 { publicPath: './', history: { type: 'hash', } } 问题描述 使用umi + react + ant design 搭建React web项目，使用的config.ts 配置如下： import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy fr
解决React网站打包上传到站点显示页面空白的问题
sakura的博客
09-02 935
这个链接接上一篇文章利用IIS本地测试站点的网站。https://blog.csdn.net/qq_40830369/article/details/120035399 然后今天要把这个文件上传到别的已经配置到域名的站点里面进行访问。本来以为只要把文件放在站点配置好的目录下然后配置到物理地址就行，结果是不行的。总是遇到空白页面的情况。打开控制台一看，报了一个这样的错误。 Failed to load resource: the server responded with a status of 404 (N
React项目npm run build打包上线后，页面出现空白的原因
热门推荐
逍遥-小子的博客
09-02 1万+
1.在你还没打包之前找到package.json这个文件，添加一行"homepage":"./"就可以了。
React-antd 打包后页面空白解决方案
SnowBeatRain的博客
07-18 6579
  在根目录下打开可以在别的资源目录下打开空白： import { BrowserRouter } from 'react-router' 因为BrowserHistory 需要服务器的支持。改成hashHistory完美解决 和vue-cli的history类似，...
react 项目打包
07-28
对于 React 项目的打包，你可以使用 Create React App（CRA）来进行简化和自动化的打包过程。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Node.js 和 npm（或者使用 yarn）。 2. 使用以下命令来安装 Create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值