【已解决】React打包访问静态页面空白

最新推荐文章于 2023-08-23 11:44:32 发布
最新推荐文章于 2023-08-23 11:44:32 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 编程学习 前端 文章标签： reactjs 前端 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueyang6019bo123/article/details/111651509
版权

一、问题描述

      使用WebStore新建的React项目，新建之后打包，我想访问页面，但是访问页面是空白

如图所示什么都没有，结果查看前段F12查看到是因为页面JS没有加载导致的

二、增加配置

在项目的  package.json添加

"homepage": ".",

重新打包即可

npm run build

重新打开页面即可

云烟飘渺o
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html...
【react】脚手架build后，静态页面空白
Voiceu的博客
07-05 976
有两个原因： 一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源 二是可能使用了BrowserRouter,要改为HashRouter 本人的两个问题都出现了 首先在package.json里面添加 “homepage” ： " . " 其次就是修改Router了 然后再build就行了 ...
React项目build打包后，页面空白的解决方案
最新发布
苍老师背后的男人
08-23 2018
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
qq_42780323的博客
11-08 8355
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。 解决办法，在page.json文件里面增加一行："homepage": "./", 2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 解决方法： react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径 我的文件位置/WEB/reactdemo, :打开页面浏览器显示的地址：htt.
react部署在阿里云linux服务器，出现白页面大坑
m0_49349350的博客
12-27 390
第一次部署项目，在部署react时，页面访问空白页，请求不到资源，花了几个小时时间也没有搞定，最后终于解决了，写博客纪念一下 打包react项目 npm run build 将生成的build文件夹拷贝到服务器任何一个位置，假如这个位置是path 比如，我的位置是 /usr/springboot/build 配置Nginx 首先得安装Nginx，这里不做介绍，最简单的方法采用宝塔面板安装，最关键的一步就是修改Nginx的配置文件，一般配置文件的路径为 nginx安装路径/nginx/conf/ng.
初次使用React写一个静态网页
fang_my的博客
03-12 4320
今天是我学习完react并且使用的第一个小工程，也不算小工程吧，仅仅就是一个小的静态网页。但是我的思想逻辑差不多已经理清了，为什么我们要用react写，而不是用html和css写，虽然我这个网页具体用react写的功能性组件不多，但是重要的是自己写下一个完完整整页面的那种开心，和遇到问题自己探索的那种过程才是我最喜欢的。 react的组件化思想很适合用于团队开发项目，因为页面的各个组成部分仅仅就是组件而已，要举例子的话，我喜欢用制造一辆汽车来举例子。 本来如果单单使用html来写一个网页的时候，人员分配
react build 后打包发布总结
10-18
在React应用开发中，`react build` 是一个关键步骤，它将源代码编译成生产环境可用的静态文件。这篇文章主要总结了`react build`后如何进行打包发布，并且提供了在Apache和Nginx服务器上的部署策略，以及解决在部署...
react-reactsnap一个单页面应用程序的零配置静态预渲染器
08-15
总的来说，`react-snap`为React开发者提供了一个易于上手、配置简单的静态预渲染解决方案，有助于提升SPA的性能和SEO。然而，理解预渲染的基本原理以及其在不同场景下的适用性仍然是至关重要的，这样才能更好地选择...
webpack4:Webpack4 + Typescript + React 踩坑配置之旅
04-25
Webpack 4 是一个模块打包工具，它能够将 JavaScript、CSS、图片等静态资源转换为浏览器可理解的形式。在 Webpack 4 中，引入了“零配置”（Zero-Config）的概念，但实际开发中，我们通常仍需自定义配置以满足项目...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-01
2. **Suspense for Data Fetching（数据获取的Suspense）**：这允许开发者在组件加载时挂起并等待数据，而不是立即显示空白页面。当数据准备好后，React会自动更新UI。 3. **Stream API（流API）**：React 18引入了...
基于react项目打包css引用路径错误解决方案
01-18
没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态资源引入错误 报错 解决方案 解决： 在package.json下面增加”homepage”: “.”。
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3051
解决create-react-app打包后, 本地打开页面空白的问题
react项目打包后，浏览器直接打开dist/index.html页面出现空白
zsy_1991的博客
03-10 8443
问题解决 下面 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打包之后静态资源加载错误的问题
admin9740的博客
07-24 2810
之前在打包react项目时发现一些问题，打包出来后我的一部分png图标加载不出来，开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名称，网上看到有一种方法是使用Hashrouter，但我的一些功能不允许因此这个方式自然不行，但是我却发现另一个问题，同样的png图片为什么偏偏那几个出不来，我进入开发者模式发现另外...
React 打包后白屏，资源找不到
LueLueLue77的博客
07-28 1340
记录下最近在打包react项目的时候遇到页面白屏，资源找不到的情况
react脚手架在组件中引入public下的图片不能显示的解决方法
m0_63135041的博客
04-29 742
react脚手架在组件中引入public下的图片不能显示的解决方法
react部署上线，出现页面显示为空，预览显示：You need to enable JavaScript to run this app.
柠的博客
07-21 7098
react部署上线，出现页面显示为空，预览显示：You need to enable JavaScript to run this app.
react 图片等资源文件的访问问题 style的动态设置问题
ahzhaihui的博客
10-15 727
img 标签：（用create-react-app搭建的react项目会以public文件夹为根目录） -----------图片放在public目录中可以直接在src里面写目录地址 -----------图片放在src目录里面，需要先import进来，在通过{ }使用 style的动态设置问题 let imgSrc= 'http://www.baid...
Create-react-app创建的项目打包后页面空白的解决方法
X北辰北的博客
11-06 2198
问题描述： 当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。 解决方法： 此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下： "homepage": "./",
react 跳转页面到静态html
07-28
在React中，通常使用React Router来进行页面的跳转。不过，如果你要跳转到一个静态HTML页面，可以使用JavaScript的`window.location`对象来实现跳转。 以下是一个示例代码，展示如何在React组件中将页面跳转到一个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值