Firebase 托管 400 错误请求答案

【问题标题】：Firebase Hosting 400 Bad RequestFirebase 托管 400 错误请求
【发布时间】：2020-04-20 19:12:18
【问题描述】：

我正在尝试为我的项目设置 Firebase 托管。我已经部署到https://budyeez-app.web.app/

我使用 vue.js 框架来构建我的应用程序，因此我的公共文件夹中有一个 index.html 文件。所有 vue 内容都加载到该文件中以进行渲染。在 localhost 上一切正常，但是当我尝试在 Firebase 上托管网站时，不会加载任何 vue 内容。如果我将内容直接写入 index.html 文件，它将加载，这解释了页面标题的工作原理。有想法该怎么解决这个吗？

Explorer

web_app/firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

web_app/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Budyeez</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <script src="https://kit.fontawesome.com/3797ae5e09.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <h3>This is a test</h3>
    <noscript>
      <strong>We're sorry but web_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

【问题讨论】：

我们需要确切地知道您的公用文件夹是什么样的、您提出请求的方式确切以及您在完成部署后希望给定 URL 做什么从那个文件夹。
我的公用文件夹包含 index.html 文件夹。我正在构建一个 vue.js 应用程序，因此所有内容都由 vue 加载到 index.html 中。没有任何 vue 内容被加载到页面，但如果我直接在 index.html 文件中写入内容，它会呈现在页面上。当我 npm run serve 一切正常。尝试使用 Firebase 托管时会出现此问题。
请编辑问题以包含您的所有观察结果（不要只是添加评论）。我们需要查看足够的信息，包括所有相关代码，以便能够完全按照您看到的方式重现问题。请阅读：stackoverflow.com/help/minimal-reproducible-example
对不起，这是我的第一篇文章。这个怎么样？

标签： firebase vue.js firebase-hosting

【解决方案1】：

将您的 firebase.json 更新为以下内容（编辑我的 cmets）：

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  },
  "hosting": {
    "public": "dist", // <-- CHANGED: hosting deploy directory to Vue's build directory
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "predeploy": [
      "npm run build" // <-- CHANGED: Before deploying, automatically build Vue project
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

【讨论】：