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

【问题标题】：How to provide path to assets within a react project hosted on Firebase?如何在 Firebase 上托管的反应项目中提供资产路径？
【发布时间】：2019-12-28 18:25:48
【问题描述】：

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

<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"

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

【问题讨论】：

当您尝试访问该站点时出现什么错误消息？
没有错误。
当项目在没有图像的情况下工作时。网页控制台中会出现错误，说明加载它们的问题。这将很好地指示代码中的错误
移除ace SDK-s只是个暖心
你有repo或者可以看到的代码示例吗？

标签： javascript html css reactjs firebase

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您似乎部署了错误的文件夹。检查您的 firebase.json 并确保您的“托管”>“公共”设置为“构建”。 Firebase init 默认会部署 index 文件夹，但 npm run build 默认会创建一个 build 文件夹进行部署。

【讨论】：

谢谢，但我已经解决了这个问题 :) 我投了赞成票。