解决React网站打包上传到站点显示页面空白的问题

最新推荐文章于 2021-12-29 11:27:18 发布
最新推荐文章于 2021-12-29 11:27:18 发布
阅读量894 收藏
点赞数 2
分类专栏： web前端 文章标签： react.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40830369/article/details/120065000
版权

这个链接接上一篇文章利用IIS本地测试站点的网站。https://blog.csdn.net/qq_40830369/article/details/120035399
然后今天要把这个文件上传到别的已经配置到域名的站点里面进行访问。本来以为只要把文件放在站点配置好的目录下然后配置到物理地址就行，结果是不行的。总是遇到空白页面的情况。打开控制台一看，报了一个这样的错误。

Failed to load resource: the server responded with a status of 404 (Not Found)

这个问题说白了就是静态的HTML页面并没有读取到相应的.css和.js文件。打开HTML页面看看里面有啥？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="./umi.css" />
    <script>
      window.routerBase = "/secssc";
    </script>
    <script>
      //! umi version: 3.5.17
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="./umi.js"></script>
  </body>
</html>

注意window.routerBase = "/secssc";这句代码的意思是进入项目后，路由会自动以/secssc为前缀进行跳转。比如我想访问http://10.0.248.15/secssc/index.html,但是实际路由总是以./来进行跳转，这样访问不到你想要的目录。这边更改后就可以访问了。

sakuraxiaoyu
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router v4中 HashRouter 和 BrowserRouter的使用
dingdabao8888的博客
05-10 1299
遇到的问题 项目中控制路由跳转使用的是BrowserRouter，代码如下： ReactDOM.render(( <BrowserRouter> <div className="container"> <Route path={routePaths.INDEX} exact component={...
基于react项目打包css引用路径错误解决方案
01-18
没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态...
React 打包后部署到服务器子页面空白问题
Spenan
11-21 2700
执行npm run build 将React打包后部署到服务器子路径 例如 更目录为root 子路径为system --root --system 发现部署到服务器之后，F12开发者模式发现资源文件引用错误 步骤(1):在项目package.json 添加 "homepage":'.'; 或者在node_modules->react-scripts->...
react项目打包出现空白页面
丁七岁的博客
07-13 666
打包结束，浏览器访问index.html这个页面 展示的是空白 其实也是路径问题： 在package.json里面添加这么一行代码： "homepage": "." 重新yarn build 就可以了
React build 后页面空白 报错
qq_40464803的博客
04-17 4983
如果想要直接双击index.html打开的话，需要对引用css,js的地址进行修改.默认的为"/"打开webpack.production.config.js将publicPath改为 如图:'./'另外要注意package.json中是否设置了用webpack.production.config.js来打包现在页面可以正常打开了，但是报了个警告这个先记录着，回头再研究一下...
react 打包出现空白页面报错
qq_43287934的博客
01-02 769
import { HashRouter as Router, Route } from 'react-router-dom' import createHistory from 'history/createHashHistory' const history = createHistory() <Router history={history}> <...
浅谈React Native打包apk的坑
08-28
React Native 打包 APK 的坑 React Native 是一个基于 JavaScript 和 React 的框架，用于...React Native 打包 APK 文件需要注意签名密钥的生成和配置、gradle 配置文件的正确性和安全性，以免出现错误和安全问题。
React中上传图片到七牛的示例代码
08-29
本篇文章主要介绍了React中上传图片到七牛的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IOS React等Title不显示问题解决办法
01-20
IOS React等Title不显示问题解决办法 单页应用里整个页面只会在第一次完全刷新，后面只会局部刷新（一般不包括head及里面的title），所以无法在服务器端控制title，只能在页面刷新的时候通过js修改title。常规做法...
react-native ios详细打包步骤及上传开发者中心.docx
04-08
React Native iOS 打包步骤及上传开发者中心详解 React Native 是一个基于 JavaScript 的移动应用框架，允许...整个过程可能需要一些时间和耐心，但是一旦完成，应用程序将被成功上传到开发者中心，等待审核和发布。
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3011
解决create-react-app打包后, 本地打开页面空白的问题
Create-react-app创建的项目打包后页面空白的解决方法
X北辰北的博客
11-06 2166
问题描述： 当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。 解决方法： 此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下： "homepage": "./",
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
qq_42780323的博客
11-08 8301
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。 解决办法，在page.json文件里面增加一行："homepage": "./", 2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 解决方法： react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径 我的文件位置/WEB/reactdemo, :打开页面浏览器显示的地址：htt.
react项目打包后路径找不到，项目打开后页面空白的问题
weixin_33692284的博客
03-16 2294
使用npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题： 解决办法：在package.json设置homepage 转载于:https://www.cnblogs.com/lan-cheng/p/10541606.html...
react设置基础路由、修改打包路径
qq_35629054的博客
07-02 2475
设置基础路由 1.基础路由设置使用了 basename import React from 'react' import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom' import * as Login from '@pages/login' <Router basename = "/test"> <Switch> <Redir
React router v3.0 配置根目录basename
曲径通幽
07-07 8875
最近在react项目中遇到路由需要配置根目录路径问题，查了很多资料，最后终于解决了，记录一下，希望对React学习的人有帮助。问题描述：使用react框架创建项目时，使用react-router ,运行npm run dev 后，使用http://localhost:8080/home 即可访问首页。但真实情况下我们打包后放在后端的前端代码都会使用nginx配置，配置后访问的路径会带一个项目名称。...
看看React-router那些基本概念
高山上的鱼
11-26 7042
问题1：首先看看自己页面中使用的一个react-router export default function ({ history }) { return ( ); }上面的例子表示当页面的路由满足了特定的格式，我就会去实例化Standarz这个router Component，那么我们看看实例化这
umi项目部署在非根目录下，多路由指向的情况解决方法
热门推荐
小记心得
07-16 2万+
本篇，只在umi项目非常熟练的情况下，如不清楚，可去umi官方文档了解。 一，需求： 1号地址：http://abc.abc.com/aaa 众所周知umi项目要部署在非根目录下，配置base必须为某个目录，即base:'/aaa/' 进入项目后，路由会自动以‘/aaa’为前缀，跳转正常， 例如： （1）点击‘关于我们’，会路由到http://abc.abc.com/aaa/about 二，需...
react打包问题，通过本地就可运行
qq1248409755的博客
12-28 1341
有人总是说打包之后要放到服务器上才能显示出页面本地是无法显示的，我发现不用部署也可以展示，在本地打包之后之所以没有出现内容是因为你的css和js没有找到这时候你只需要在webpack中配置下路径即可但是这样也很麻烦。还有一种简单的方式就是通过package.json但是这里注意你不能用css引入图片这样都会找不到，你要通过require引入图片加载尽来然后进行使用，这也算是一个缺点。配置如下 你只需要配置红框里这个即可，有空闲时间的小伙伴可以去试试。 ...
react中如何打包上传图片文件
最新发布
03-28
要在React中打包和上传图片文件，可以使用以下步骤： 1. 在React项目中安装依赖：`npm install axios react-dropzone` 2. 创建一个组件来选择和上传图片： ```jsx import React, { useState } from "react"; import axios from "axios"; import Dropzone from "react-dropzone"; const ImageUploader = () => { const [selectedFile, setSelectedFile] = useState(null); const handleFileSelect = (files) => { setSelectedFile(files[0]); }; const handleUpload = async () => { const formData = new FormData(); formData.append("file", selectedFile); const response = await axios.post("/api/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, }); console.log(response.data); }; return ( <div> <Dropzone onDrop={handleFileSelect}> {({ getRootProps, getInputProps }) => ( <div {...getRootProps()}> <input {...getInputProps()} /> {selectedFile ? ( <div> <p>Selected file: {selectedFile.name}</p> <button onClick={handleUpload}>Upload</button> </div> ) : ( <p>Drag and drop a file here, or click to select a file</p> )} </div> )} </Dropzone> </div> ); }; export default ImageUploader; ``` 3. 在后端创建一个API来接收上传的文件： ```js const express = require("express"); const multer = require("multer"); const path = require("path"); const app = express(); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, "uploads/"); }, filename: function (req, file, cb) { cb(null, file.fieldname + "-" + Date.now() + path.extname(file.originalname)); }, }); const upload = multer({ storage: storage }); app.post("/api/upload", upload.single("file"), (req, res) => { console.log(req.file); res.send("File uploaded successfully"); }); app.listen(5000, () => { console.log("Server started on port 5000"); }); ``` 在这个示例中，我们使用`multer`中间件来处理上传的文件，并将其保存到`uploads/`目录中。我们还将文件重命名为`fieldname-timestamp.extname`的格式。 4. 在`App.js`中使用这个组件： ```jsx import React from "react"; import ImageUploader from "./ImageUploader"; const App = () => { return ( <div> <h1>Image Uploader</h1> <ImageUploader /> </div> ); }; export default App; ``` 这样，你就可以选择一个图片文件并将其上传到服务器了。请注意，你需要在服务器上创建一个`uploads/`目录来保存上传的文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值