react项目打包后点击index.html页面出现空白的问题
react项目打包后点击index.html页面出现空白
在打包之前,在package.json中private下(位置任意)添加"homepage": "./"
这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的
然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改
然后执行yarn build 或者 npm run build
再点开index.html就不会报错
原因：
你必须把build里的文件直接放到应用服务器的根路径下，比如，你的服务器IP是172.16.38.253，应用服务器端口为8080，你应该保证http://172.16.38.253:8080这种访问方式，访问到的是你的build下的文件。
如果你希望以http://172.16.38.253:8080/build/index.htm这种方式访问应用，那么你可以在package.json文件中增加一个homepage字段。
在服务器下运行和直接打开html文件有什么区别？
最直接的区别，很容易注意到，一个是file协议，另一个是http协议。
file协议更多的是将该请求视为一个本地资源访问请求，和你使用资源管理器打开是一样的，是纯粹的请求本地文件。
而http请求方式则是通过假架设一个web服务器，解析http协议的请求然后向浏览器返回资源信息。
我们所开发的html文件最后必定是会以网页的形式部署在服务器上，通过http协议访问，所以我们开发中也尽可能模拟线上环境，架设本地服务器，来避免file协议与http协议实现过程中的某些差异性，如某些API的差异、跨域请求的差异等。
举个最容易验证的例子：
在页面引入一张绝对路径的图片，即'/image/example.png'，然后分别通过这两种方式打开页面，file协议会将资源请求到根路径，而http协议虽然也会请求到根路径，但是是相对本地架设的服务器的根路径，一般也就是项目文件夹的路径。
html是运行于客户端的超文本语言，从安全性上来讲，服务端不能对客户端进行本地操作。
即使有一些象cookie这类的本地操作，也是需要进行安全级别设置的。
react build后打开index.html空白Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
打开config/paths.js, 搜索“pathname”，在斜杠前加一个点
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Electron整合React使用搭建开发环境，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了搭建 React Native 开发环境的详细过程,本文通过图文指令给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
Ant Design主要用于中后台系统的使用,它提供了丰富的组件和工具,可以帮助开发人员快速构建出美观、易用的界面,同时,Ant Design还提供了详细的文档和示例,方便开发者学习和使用,这篇文章主要介绍了React使用UI（Ant Design）框架,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了React router基础使用方法，React Router是React生态系统中最受欢迎的第三方库之一，近一半的React项目中使用了React Router，下面就来看看如何在React项目中使用2023-04-04
本文主要介绍了React中使用axios发送请求的几种常用方法，主要介绍了get和post请求，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
React + Threejs + Swiper 实现全景图效果的完整代码
全景图效果非常漂亮给人带来极好的用户体验效果，那么基于前端开发如何实现这种效果呢，下面小编给大家带来了React + Threejs + Swiper 实现全景图效果，感兴趣的朋友一起看看吧2021-06-06
解决React报错Parameter 'props' implicitly&nb
这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
useCallback是用来帮忙缓存函数的,当依赖项没有发生变化时,返回缓存的指针,而props涉及到复杂对象类型都是通过指针来传递到,下面这篇文章主要给大家介绍了关于useCallback使用的相关资料,需要的朋友可以参考下2023-02-02
数据的受控控制一直是react里的一个痛点,当我想要实现一个输入框的受控控制时,我需要定义一个onChange和value,手动去实现数据的绑定,本文小编给大家介绍了react表单受控的实现方案,需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了React不能将useMemo设置为默认方法原因详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2022-07-07
最新评论