React Build funktioniert nicht ordnungsgemäß, ohne index.html in der URL hinzuzufügen

Question

Ich verwende Hash-Routing für eine React JS-Anwendung. Die Anwendung läuft in der lokalen Umgebung einwandfrei.

Zum Beispiel sollte https://stackoverflow.com/posts/ die URL der Anwendung sein, aber es funktioniert nicht und ich muss https://stackoverflow.com/posts/index.html verwenden, um es zu erstellen arbeiten.

Nach der Bereitstellung ist mir aufgefallen, dass eine leere Datei mit dem Namen „download“ heruntergeladen wurde, anstatt die Standarddatei index.html bereitzustellen. Um Builds auf dem Server auszuführen, verwende ich die S3- und CloudFront-Architektur.

Im Moment kann ich nicht sagen, ob sich das HASH-Routing schlecht verhält oder ob etwas mit der AWS-Bereitstellung nicht stimmt.

Code-Snippet mit React JS

import React from 'react';
ReactDOM aus „react-dom“ importieren;
import { Provider } from 'react-redux';
Shop aus „./redux/store“ importieren;
App aus './App' importieren;
importiere reportWebVitals aus './reportWebVitals';
import { HashRouter } from 'react-router-dom/cjs/react-router-dom';

ReactDOM.render(
 <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Anbieter>

  document.getElementById('root')
);

Teil des package.json-Inhalts

{
  "Name": "Loremipsum",
  „Version“: „0.1.0“,
  "privat": wahr,
  "Homepage": "/loremipsum/"
}

Answer 1

是否需要部署在子目录上？如果是，您将必须更改 package.json 文件的内容，以强制相对于 index.html 文件提供资源。

{
  "name": "loremipsum",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "scripts": {
    "build": "react-scripts build",
    "build-prd": "PUBLIC_URL=http://www.foo/relativepath react-scripts build"
    // ...
  }
}

有了这个，我们将能够将托管在 http://www.foo 中的应用程序移动到 http://www.foo/relativepath 甚至https://www.foo/bar1/bar2/ 无需重建。

您还必须覆盖 PUBLIC_URL 以包含您想要托管文件的域和子目录