如何在 Firebase 上托管的反应项目中提供资产路径？

Question

我使用 npx create-react-app my-app 创建了一个 React 应用程序。在我运行 npm run build 之后，我使用 firebase deploy 在 firebase 上部署了它。不幸的是，它没有在主机 link 上显示任何内容。之后，我重写了所有文件路径如：

<link href="/static/css/main.493343f3.chunk.css" rel="stylesheet">

到

<link href="./css/main.493343f3.chunk.css" rel="stylesheet">

在此之后，除了图像之外，该项目（在托管时）正常工作。

我转到 main.17a5dc8e.chunk.js 文件并重写了所有文件路径：

"static/media/placeholder.3a8380d3.jpg"

到

"./media/placeholder.3a8380d3.jpg"

但还是一无所获。我搞砸了什么？我该如何解决？

Answer 1

您似乎部署了错误的文件夹。检查您的 firebase.json 并确保您的 "hosting" > "public" 设置为 "build"。 Firebase init 默认部署 index 文件夹，但 npm 运行 build 默认创建一个构建文件夹用于部署。

Answer 2

将重写规则添加到 firebase.json （顺序很重要）

"hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/static/**",
        "destination": "/static/**"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },

如何在 Firebase 上托管的反应项目中提供资产路径？

How to provide path to assets within a react project hosted on Firebase?

html

javascript

css

firebase

reactjs