如果不在 URL 中新增 index.html，React 建置將無法正常運作

Question

我正在使用哈希路由來處理 React JS 應用程式。在本機環境中應用程式運作良好。

例如https://stackoverflow.com/posts/ 應該是應用程式的 URL，但它不起作用，我必須使用 https://stackoverflow.com/posts/index.html 才能使其工作。

部署後，我發現它正在下載名為“down​​load”的空文件，而不是提供構建文件中預設的index.html文件。為了在伺服器上運行構建，我使用 S3 和 CloudFront 架構。

現在，我無法確定 HASH 路由是否有行為錯誤或 AWS 部署出現問題。

使用 React JS 的程式碼片段

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from 'react-router-dom/cjs/react-router-dom';

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

  document.getElementById('root')
);

部分package.json內容

{
  "name": "loremipsum",
  "version": "0.1.0",
  "private": true,
  "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 以包含您想要託管檔案的網域和子目錄