为什么我的 React 构建的 index.html 是空白的？

Question

我正在使用 Snowpack 制作一个 React 应用程序。 一切正常，构建也成功。 但是当我要打开构建的 index.html 时，页面是空白的。

我通过修改构建文件夹中的 index.html 找到了一个临时修复程序。

原索引.html 编译码（空白页）：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React page</title>
</head>
<body>
    <div id="root"></div>
    <script src="/js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="/js/lib-react-dom.743af248c46307798cb8.js"></script><script src="/js/index.6929e3680f85299b6d65.js"></script>

</body></html>

这是修改后的工作：

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React page</title>
</head>
<body>
    <div id="root"></div>
    <script src="./js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="./js/lib-react-dom.743af248c46307798cb8.js"></script><script src="./js/index.6929e3680f85299b6d65.js"></script>

</body></html>

诀窍是将src=/js/xxxxx.js为src=./js/xxxxx.js

问题是每次构建项目时修改都非常烦人，那么有什么办法可以解决这个问题吗？

这是我的snowpack.config.js代码：

module.exports = {
    devOptions: {
        port: 3000
    },

    mount: {
        src: "/dist",
        public: {url: "/", static: true}
    },

    plugins: [
        [
            '@snowpack/plugin-webpack', {
                htmlMinifierOptions: false
            }
        ]
    ]
}

和我的 index.html 的脚本标签：

<script src="./dist/index.js" type="module"></script>

在此先感谢您的帮助！

Answer 1

我认为您将公共脚本加载 URL 指向您计算机的根目录，而不是放置脚本的位置！

我想如果您将mount.public更改为：

public: {url: "./", static: true}

它应该可以正常工作！

为什么我的 React 构建的 index.html 是空白的？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-03 15:07:20

为什么我的 React 构建的 index.html 是空白的？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-03 15:07:20

解决方案1
0 已采纳 2021-05-03 15:07:20