构建文件的 ReactJS 资源路径

Posted 2023-03-07

【中文标题】构建文件的 ReactJS 资源路径

【英文标题】：ReactJS resource paths of built files

【发布时间】：2018-03-09 01:14:57

【问题描述】：

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

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

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

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

【问题讨论】：

将"homepage": "/folder" 添加到您的package.json （对我来说，这是在构建过程完成时在终端右侧说明的）

@ChrisG 完美！谢谢你。如果您将其发布为答案，我会接受:)

【参考方案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"
    ,
    ...