javascript - 构建文件的 ReactJS 资源路径

Question

我有一个 ReactJS 项目，它在 npm run build 之后生成用于服务的静态文件。这些文件是 index.html、main.ef19974a.js 和 main.f06643f6.css。

html 文件引用了这些其他文件中的每一个，但作为绝对路径。这意味着当客户端收到 html 文件时，它会尝试在主机上搜索 /static/js/main.ef19974a.js 而不是 static/js/main.ef19974a.js 来自与正在提供的 index.html 文件相同的目录。

有没有办法让 React 在构建步骤中创建相对路径引用或允许我们提供工作目录？

暂时有效的解决方法是手动修改生成的 index.html 文件以引用 js 和 css 文件，但当我包括其他资源，例如未从 index.html 引用的图像，并默认返回这些文件的绝对路径。

Answer 1

您可以使用 homepage 键在您的 package.json 中设置将包含 index.html 的文件夹:

    ...
    "devDependencies": {
        "react-scripts": "1.0.10"
    },

    "homepage": "/myapp",   // website will be hosted at http://hostname/myapp

    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "toolbox": "react-toolbox-themr",
        "eject": "react-scripts eject"
    },
    ...