firebase 阻止 Mime 类型 React vue

Question

我一直在尝试托管一个在 firebase 上使用 firestore 的 vite React 应用程序。当使用“npm run dev”时，该网站可以在本地运行。但是，当我初始化 Firebase 托管并部署时，它给了我一个空白页面。检查控制台后，我得到了这两个错误：

样式表 [我的网站 url]/assets/index-789467f8.css 未加载，因为其 MIME 类型“text/html”不是“text/css”。

由于不允许的 MIME 类型（“text/html”），从 [我的网站 url]/assets/index-d9f611fa.js 加载模块被阻止。

请帮忙！！！

我查找了问题并尝试了多种解决方案，例如 viteconfig.ts 中的 base: "./"，为每种文件类型添加标头，并重新初始化应用程序。谁能帮我解决这个问题吗？

Answer 1

您的问题似乎源于为您的 CSS 和 JavaScript 文件提供的 MIME 类型不正确。当部署期间未正确定位或引用文件时，通常会发生这种情况。以下是一些有助于排查和解决此问题的步骤：

检查
```
vite.config.js
```
配置： 确保您的
```
vite.config.js
```
文件设置正确，尤其是
```
base
```
属性。对于 Firebase 托管，应将
```
base
```
属性设置为
```
"/"
```
：
```
export default {
  base: '/',
  // other configurations
}
```
确保正确构建： 在部署之前确保您的应用程序已正确构建。运行：
```
npm run build
```
这将默认在
```
dist
```
文件夹中生成必要的文件。

Firebase

firebase.json

配置： 确保您的

firebase.json

文件配置正确，可以从构建目录提供静态文件。它应该看起来像这样：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

部署到 Firebase： 确保您正在部署正确的目录。运行：
```
firebase deploy
```

检查

index.html

中的文件参考： 验证

index.html

文件夹中生成的

dist

文件中资源的路径是否正确。它们应该是相对路径：

<link rel="stylesheet" href="/assets/index-789467f8.css">
<script type="module" src="/assets/index-d9f611fa.js"></script>

验证 Firebase 托管配置： 有时，Firebase 托管配置可能会错误缓存或导致其他问题。您可以尝试清除缓存或在隐身窗口中访问该网站。

正确设置标题： 如果您尝试手动设置标题，请确保它们在

firebase.json

:

中正确设置

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          },
          {
            "key": "Content-Type",
            "value": "text/css"
          }
        ]
      }
    ]
  }
}

根据需要将

Content-Type

调整为

text/css

和

text/javascript

。

调试构建目录： 检查您的
```
dist
```
文件夹的内容，以确保所有必要的文件都存在且名称正确。

通过执行这些步骤，您应该能够解决为 CSS 和 JavaScript 文件提供的 MIME 类型不正确的问题。如果问题仍然存在，请提供有关您的设置的更多详细信息以及您遇到的任何错误，以便进一步进行故障排除。看来您的问题源于为 CSS 和 JavaScript 文件提供的 MIME 类型不正确。当部署期间未正确定位或引用文件时，通常会发生这种情况。以下是一些有助于排查和解决此问题的步骤：

检查
```
vite.config.js
```
配置： 确保您的
```
vite.config.js
```
文件设置正确，尤其是
```
base
```
属性。对于 Firebase 托管，应将
```
base
```
属性设置为
```
"/"
```
：
```
export default {
  base: '/',
  // other configurations
}
```
确保正确构建： 在部署之前确保您的应用程序已正确构建。运行：
```
npm run build
```
这将默认在
```
dist
```
文件夹中生成必要的文件。

Firebase

firebase.json

配置： 确保您的

firebase.json

文件配置正确，可以从构建目录提供静态文件。它应该看起来像这样：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

部署到 Firebase： 确保您正在部署正确的目录。运行：
```
firebase deploy
```

检查

index.html

中的文件参考： 验证

index.html

文件夹中生成的

dist

文件中资源的路径是否正确。它们应该是相对路径：

<link rel="stylesheet" href="/assets/index-789467f8.css">
<script type="module" src="/assets/index-d9f611fa.js"></script>

验证 Firebase 托管配置： 有时，Firebase 托管配置可能会错误缓存或导致其他问题。您可以尝试清除缓存或在隐身窗口中访问该网站。

正确设置标题： 如果您尝试手动设置标题，请确保它们在

firebase.json

:

中正确设置

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          },
          {
            "key": "Content-Type",
            "value": "text/css"
          }
        ]
      }
    ]
  }
}

根据需要将

Content-Type

调整为

text/css

和

text/javascript

。

调试构建目录： 检查您的
```
dist
```
文件夹的内容，以确保所有必要的文件都存在且名称正确。

通过执行这些步骤，您应该能够解决为 CSS 和 JavaScript 文件提供的 MIME 类型不正确的问题。如果问题仍然存在，请提供有关您的设置的更多详细信息以及您遇到的任何错误，以便进一步排除故障。

firebase 阻止 Mime 类型 React vue

问题描述投票：0回答：1

1个回答

最新问题

firebase 阻止 Mime 类型 React vue

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1