Question

我有一个使用 create-react-app 的项目。

在开发模式下（使用 scripts / start ），我没有进行任何处理。在完成我的项目几个星期之后，我想部署进行生产。

我运行了脚本/构建。

这创建了一个文件夹结构，如下所示：

我认为 index.html 是所有这些的入口点，所以我运行了index.html。

我得到的只是一个黑屏，显示404错误。

我完全不知道这是什么意思！！

我尝试查看了 index.html 文件，但该文件仅包含模糊的javascript。（create-react-app似乎隐藏了可能有助于解决问题的所有内容）。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <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"/>
    <title>React App</title>
    <link href="/static/css/main.a5508311.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (l) {
    function e(e) {
        for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++) t = n[f], p[t] && i.push(p[t][0]), p[t] = 0;
        for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
        for (s && s(e); i.length;) i.shift()();
        return c.push.apply(c, u || []), a()
    }

如何将我的create-react-app从开发变为生产？

更新：

我决定更新我生成的index.html文件，并放置一个“。”在我的道路前。

<script src="/static/js/1.e82eda2e.chunk.js"></script>

成为：

<script src="./static/js/1.e82eda2e.chunk.js"></script>

现在它可以工作了（有点）。这是一个开箱即用的解决方案！

在生成生产构建index.html时，如何防止在create-react-app中弄乱我的路径？为什么要这样做呢？！

更新2：

在互联网上闲逛我发现您可以添加

  "homepage": "./",

我做到了

现在我的应用程序可以工作了，但是图像没有加载。我的反应路线也坏了。刷新链接无效。...

Answer 1

做到这一点的最佳方法是使用serve在本地运行它：

npm install serve -g
npm运行构建
服务-s构建

这将创建一个运行在端口5000上http://localhost:5000的本地服务器

未在create-react-app中获得生产版本

1 个答案: