问题描述
我正在尝试使用 react 的构建工具构建我的 react 应用程序.当我尝试npm start"时,应用程序运行良好.
npm start
在
但是当我构建应用程序并尝试访问构建文件夹中的index.html"文件时,它不起作用并且我遇到了白色的空白屏幕.
npm 运行构建
这是index.html
<html lang="zh-cn"><头><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="快捷图标" href="/favicon.ico"><title>React App</title><link href="/static/css/main.9a0fe4f1.css" rel="样式表"><身体><noscript>您需要启用 JavaScript 才能运行此应用程序.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.46d8cd76.js"></script></html>
我做错了吗?我无法访问我的 apache 网络服务器上构建的 index.html 文件吗?
可能您还没有注意到,但我认为您的 html 文件无法正确导入 css 和脚本文件.当我查看您的文件结构时,我看到有关 build 的所有内容都在 build 文件夹下.但是在您的 html 文件中,文件路径前有斜杠(/").这就是浏览器在构建"的父级下寻找这些文件的原因.尝试删除斜线.
<html lang="zh-cn"><头><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="快捷方式图标" href="/favicon.ico"><title>React App</title><style></style><link href="static/css/main.65027555.css" rel="样式表"><身体<noscript>您需要启用 JavaScript 才能运行此应用程序.</noscript><div id="root"></div><script type="text/javascript" src="static/js/main.316f1156.js"></script></html>
I'm trying to build my react app using react's build tool. When I try to "npm start", the app works fine.
npm start
On http://localhost:3000 => I can access the application.
But when I build the application and try to access "index.html" file on the build folder, it doesn't work and I encounter with a white blank screen.
npm run build
http://myreact-app/build/index.html => White blank screen.
This is the build folder which has been created after run npm run build.
And this is the 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>
Am I doing something wrong? Can't I access the built index.html file on my apache web server?
Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.
<!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>
这篇关于为什么 React 生产构建不能在浏览器上运行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!