首页  >  问答  >  正文

如果不在 URL 中添加 index.html,React 构建将无法正常工作

<p>我正在使用哈希路由来处理 React JS 应用程序。在本地环境中应用程序运行良好。</p> <p>例如https://stackoverflow.com/posts/ 应该是应用程序的 URL,但它不起作用,我必须使用 https://stackoverflow.com/posts/index.html 才能使其工作。</p> <p>部署后,我发现它正在下载名为“<strong>download</strong>”的空文件,而不是提供构建文件中预设的<strong>index.html</strong>文件。为了在服务器上运行构建,我使用 S3 和 CloudFront 架构。</p> <p>现在,我无法确定 HASH 路由是否行为错误或者 AWS 部署出现问题。</p> <p>使用 React JS 的代码片段</p> <pre class="brush:php;toolbar:false;">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') );</pre> <p><strong>部分package.json内容</strong></p> <pre class="brush:php;toolbar:false;">{ "name": "loremipsum", "version": "0.1.0", "private": true, "homepage": "/loremipsum/" }</pre></p>
P粉216203545P粉216203545437 天前456

全部回复(1)我来回复

  • P粉515066518

    P粉5150665182023-09-02 00:44:52

    是否需要部署在子目录上?如果是,您将必须更改 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 以包含您想要托管文件的域和子目录

    回复
    0
  • 取消回复