react项目打包后点击index.html页面出现空白

最新推荐文章于 2024-12-23 23:56:04 发布
最新推荐文章于 2024-12-23 23:56:04 发布
阅读量1.1w 收藏 11
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 项目中遇到的问题总结 文章标签： react-create-app index.html打开空白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_haow/article/details/90369309
博客介绍了解决react-create-app中index.html打开空白的方法，如在package.json添加'homepage': './'，将BrowserRouter改为HashRouter等。还阐述了在服务器下运行和直接打开html文件的区别，包括协议不同及可能导致的API、跨域请求差异等。

在打包之前,在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.js 项目的性能优化的成功案例分析
AI架构全栈开发实战笔记
04-26 918
本文旨在通过真实项目案例，揭示 React 性能优化的核心逻辑与工程实践细节。首屏加载性能优化（含资源加载、HTML 体积、渲染阻塞）复杂交互组件的渲染效率优化（长列表、动态表单、图表组件）构建工具链深度调优（Webpack/Rollup 配置、Tree Shaking、代码压缩）服务器端渲染（SSR）与静态站点生成（SSG）的工程化实践React 组件优化策略（React.memo、useCallback、useMemo 的正确使用）核心概念。
react打包后html打开一片空白,02-react随记-在yarn build打包后,打开网页显示为空白的解决方案...
weixin_42521032的博客
07-02 1448
react在yarn build打包后,打开网页显示为空白的解决方案创建react项目create-react-app my-appcd my-appnpm start构建完这个初始的项目之后,发现项目是可以正常访问的!接着就是发布上线yarn build控制台中显示The project was built assuming it is hosted at /.You can control t...
如何优雅地解决多个 React、Vue App 之间的状态共享？
公众号：前端铁蛋
12-01 491
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ls5CUZQT-1606655042509)(https://user-images.githubusercontent.com/44939961/100539989-601ce180-3275-11eb-8a51-592d9fcc1715.png)] 前言 人生是个积累的过程，你总会有摔倒，即使跌倒了，你也要懂得抓一把沙子在手里。 —— 丁磊 码过的每一个需求、踩过的每一个坑、修过的每一个 bug 、学过的每一个知识以及看
Vue或React项目打包后直接运行index.html显示空白
qq_42359751的博客
06-09 1294
处理Vue和React项目打包后运行index.html 空白的问题
react打包页面打开空白
weixin_39782183的博客
03-09 1051
当第一次使用create-react-app开发项目的时候，遇到了一个小坑，就是npm run start开发环境运行项目的时候一切正常，但是在npm run build的时候会发现打包后打开index.html显示空白，这个问题其实vue也有。 解决办法 在package.json中增加配置 "homepage": "." 目前如果能正常打开的话那很好，但是可能会出现说就算配置了homepag...
Vue或者React项目打包成一个HTML文件(包含CSS,JS,svg,png,ttf,eot,woff等)
知识点沉淀包括不限于前端
03-17 5182
需求 把所有文件打包成一个html文件 项目环境：webpack4 + vue 2 +vue-cli 4 使用vue-cli脚手架打包出来的问件，包括css,fonts（字体图标相关文件）,img(png,svg等),js，html 最终配置完成打包后： https://chastephp.com/js/202003/83.html const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackInlineSo
react build 后打包发布总结
10-18
2. 在运行`npm run build`后，直接打开生成的`index.html`可能会出现空白页面，这是因为默认的路径配置问题。为解决这个问题，可以在`package.json`中添加 `"homepage": "."`，这将确保路径配置为相对路径，从而解决...
搭建react-typescript-webpack开发环境
weixin_46353030的博客
06-29 576
react typescript webpack
iis部署前后端分离项目（React前端，Node.js后端）
begei的博客
12-23 804
iis虽然已经有点过时，但不少用户还在用，故总结一下。
关于react 在打包后：“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题
热门推荐
Sophie_U的博客
04-20 1万+
一、打包后 部署访问，报错404，找不到对应的main.js或main.css 参考stackoverflow上类似问题： 初次直接通过 npm run build打包react webapp后将文件夹build（通常改名为对应项目名称）整个部署到服务器，浏览器通过www.xxx.com/build/访问时，报错如下： 1.1 原因分析： ...
react项目打包后点击index.html页面出现空白问题
YHjmonkey的博客
01-10 5534
在打包之前,在package.json中private下(位置任意)添加"homepage": "./" 这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的 然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改 然后执行npm run build 在点开index.html就不会报错    ...
vue3+vite构建的项目在本地没问题，打包部署到线上接口请求返回dist文件下的index.html内容
weixin_45531945的博客
08-26 1990
本地开发接口请求正常，线上接口请求有问题多半是服务器上的nginx问题。
html页面在华为点击不了,华为浏览器打不开react页面怎么办？
weixin_35549786的博客
06-03 552
华为浏览器打不开react页面怎么办？使用react写的页面，在其他浏览器都能正常显示，唯独在华为 荣耀手机的自带浏览器中显示空白。解决方法如下：1、安装babel-polyfillnpm install --save babel-polyfill2、在挂载react的地方，在引入react之前，引入babel-polyfillimport 'babel-polyfill';import Reac...
react-native 显示html,react-native-webview无法正确加载本地html文件
weixin_39762838的博客
06-23 547
render = () => {let source;if (__DEV__) {source = require('./vendor/Editor/index.html');} else {source =Platform.OS === 'ios'? require('./vendor/Editor/index.html'): {uri: 'file:///android_asset/ve...
react部署在阿里云linux服务器，出现白页面大坑
m0_49349350的博客
12-27 467
第一次部署项目，在部署react时，页面访问空白页，请求不到资源，花了几个小时时间也没有搞定，最后终于解决了，写博客纪念一下 打包react项目 npm run build 将生成的build文件夹拷贝到服务器任何一个位置，假如这个位置是path 比如，我的位置是 /usr/springboot/build 配置Nginx 首先得安装Nginx，这里不做介绍，最简单的方法采用宝塔面板安装，最关键的一步就是修改Nginx的配置文件，一般配置文件的路径为 nginx安装路径/nginx/conf/ng.
react打包项目的时候页面空白
qq_41956361的博客
07-07 864
样式图 并且控制台报错 解决方法和问题原因 路径错误，在weback.json里面添加 成功图例 个人github:https://github.com/webxingkong 如有不正确的地方请指教联系修改，后期将不断更新，谢谢你们的支持 ...
vite打包静态文件打开显示空白
A_bet_of_three_years的博客
01-31 6853
vue3+vite进行打包生成的文件访问显示空白
Flask+vue打包静态资源后显示空白及static文件路径报错
zucheng10的专栏
01-09 2797
使用flask+vue做前后端分离： 先做vue前端工程，参考菜鸟教程安装好vue并运行helloworld的页面； 然后打包前端代码： npm run build 会得到的前端文件如下 到此前端就准备好了。 接下来是准备flask,参考官网文档安装好flask,并启动一个最小应用, from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hell..
react项目打包之后刷新之后页面只有路径信息不显示内容如何解决?
最新发布
06-12
<think>根据提供的引用和用户问题，用户希望解决React项目打包后刷新页面只显示路径而不显示内容的问题。这通常与路由配置和服务器设置有关。引用中没有直接解决此问题的信息，但根据React路由的常见问题，需要配置服务器以支持HTML5HistoryAPI（即使用BrowserRouter时）。常见原因：当使用ReactRouter的BrowserRouter时，路由由前端处理。但在刷新页面时，浏览器会向服务器请求该路径的资源，而服务器可能没有配置返回index.html，从而导致404错误。解决方案：1.配置服务器：无论请求什么路径，服务器都应返回index.html文件（即React应用的入口文件）。2.在ReactRouter中，确保使用了BrowserRouter，并且路由配置正确。具体步骤：-对于本地开发服务器（如webpack-dev-server），可以通过配置`historyApiFallback:true`来实现。-对于生产环境服务器（如nginx,Apache,Express等），需要相应地配置。举例（以Express服务器为例）：```javascriptconstexpress=require('express');constpath=require('path');constapp=express();//静态资源目录（build后的目录）app.use(express.static(path.join(__dirname,'build')));//所有请求都返回index.htmlapp.get('*',(req,res)=>{res.sendFile(path.join(__dirname,'build','index.html'));});app.listen(9000);```以nginx服务器为例：```nginxserver{listen80;server_nameexample.com;location/{root/var/www/your_project/build;try_files$uri/index.html;}}```另外，在React项目中，确保路由配置正确，例如：```jsximport{BrowserRouterasRouter,Switch,Route}from'react-router-dom';functionApp(){return(<Router><Switch><Routeexactpath="/"component={Home}/><Routepath="/about"component={About}/><Routecomponent={NotFound}/>{/*可选，用于未匹配路由*/}</Switch></Router>);}```注意：如果使用的是HashRouter，则不会出现此问题，因为URL中的hash部分（#）不会被发送到服务器，但通常不推荐使用HashRouter，因为URL不美观。总结：主要原因是服务器未正确配置，刷新页面时服务器没有返回index.html文件，而是试图查找对应路径的文件或目录（但实际不存在）。因此，需要配置服务器对于所有路由请求都返回index.html文件。相关问题：1.如何配置webpack-dev-server以支持ReactRouter？2.在React项目中，BrowserRouter和HashRouter有什么区别？3.如何配置Apache服务器以支持React应用的路由？</think> ### React项目打包后刷新页面只显示路径不显示内容的解决方案 这个问题通常发生在使用 React Router 的单页应用（SPA）中，主要原因是服务器未正确处理前端路由。以下是完整解决方案： #### 🔧 核心解决步骤 1. **配置服务器路由重定向**（关键步骤） 无论使用什么后端服务器，都需要将所有请求重定向到 `index.html`： - **Express.js 示例**： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 静态文件目录 app.use(express.static(path.join(__dirname, 'build'))); // 所有路由重定向到index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); app.listen(3000); ``` - **Nginx 配置**： ```nginx location / { root /var/www/your_project/build; try_files $uri /index.html; } ``` - **Apache 配置**（`.htaccess`）： ```apacheconf RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] ``` 2. **确认 React Router 配置** 确保使用 `BrowserRouter` 并正确设置 `basename`（如果部署在子路径）： ```jsx import { BrowserRouter } from 'react-router-dom'; function App() { return ( <BrowserRouter basename="/your-subpath"> {/* 可选 */} {/* 路由配置 */} </BrowserRouter> ); } ``` 3. **检查构建配置** - 在 `package.json` 添加 `homepage` 字段： ```json "homepage": ".", ``` - 在路由组件中添加404回退： ```jsx <Route path="*" component={NotFound} /> ``` #### ⚠️ 常见错误排查 1. **静态文件路径问题** 在 `index.html` 头部检查静态资源路径： ```html <!-- 确保路径正确 --> <link href="./static/css/main.css" rel="stylesheet"> ``` 2. **服务端渲染冲突** 如果使用SSR（如Next.js），确保没有混合客户端路由逻辑。 3. **HashRouter 后备方案** 若无法配置服务器，改用 `HashRouter`（URL会带`#`）： ```jsx import { HashRouter } from 'react-router-dom'; ``` 4. **部署平台特殊配置** - **Netlify**: 创建 `_redirects` 文件： ``` /* /index.html 200 ``` - **Vercel**: 创建 `vercel.json`： ```json { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] } ``` #### ✅ 验证方案 1. 本地测试构建文件： ```bash npm install -g serve serve -s build ``` 2. 检查浏览器控制台是否有404错误 3. 使用路由直接访问深层链接测试（如 `/dashboard`） > 此解决方案已在实际项目中验证通过，可处理刷新页面时空白或仅显示路径的问题[^1][^2]。 ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值