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文件相同的目录中搜索index.html服务了。

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

暂时有效的解决方法是手动修改生成的js文件以引用css和index.html文件，但是当我包含其他资源（例如未引用的图像）时会失败// Lambda handler exports.handler = (data, context, callback) => { switch (data.type) { case "url_verification": verify(data, callback); break; case "event_callback": process(data.event, callback); break; default: callback(null); } }; // Post message to Slack - https://api.slack.com/methods/chat.postMessage function process(event, callback) { // test the message for a match and not a bot if (!event.bot_id && /(aws|lambda)/ig.test(event.text)) { var text = `<@${event.user}> isn't AWS Lambda awesome?`; var message = { token: ACCESS_TOKEN, channel: event.channel, text: text }; var query = qs.stringify(message); // prepare the querystring https.get(`https://slack.com/api/chat.postMessage?${query}`); } callback(null); }并默认返回这些文件的绝对路径。

Answer 1

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

    ...
    "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"
    },
    ...

ReactJS构建文件的资源路径

1 个答案: