为什么 React 生产构建不能在浏览器上运行? [英] Why won't React production build run on the browser?

查看：45
本文介绍了为什么 React 生产构建不能在浏览器上运行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 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 生产构建不能在浏览器上运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆