gpt4 book ai didi

reactjs - 为什么 React 生产构建无法在浏览器上运行?

转载 作者:行者123 更新时间:2023-12-03 13:02:59 25 4
gpt4 key购买 nike

我正在尝试使用 React 的构建工具构建我的 React 应用程序。当我尝试“npm start”时,该应用程序工作正常。

npm start

关于 http://localhost:3000 => 我可以访问该应用程序。

enter image description here

但是当我构建应用程序并尝试访问构建文件夹中的“index.html”文件时,它不起作用,并且遇到白色的空白屏幕。

npm run build

http://myreact-app/build/index.html => 白色空白屏幕。

这是运行 npm run build 后创建的构建文件夹。

enter image description here

这是index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
</body>
</html>

我做错了什么吗?我无法访问 apache Web 服务器上构建的 index.html 文件吗?

最佳答案

可能您还没有注意到,但我认为您的 html 文件无法正确导入 css 和脚本文件。当我查看您的文件结构时,我看到有关构建的所有内容都位于构建文件夹下。但在您的 html 文件中,文件路径之前有斜杠(“/”)。这就是浏览器在“构建”的父级下查找这些文件的原因。尝试删除斜杠。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style></style>
<link href="static/css/main.65027555.css" rel="stylesheet">
</head>
<body
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="static/js/main.316f1156.js"></script>
</body>
</html>

关于reactjs - 为什么 React 生产构建无法在浏览器上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44371052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com