Question

我正在尝试为我的项目获取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>

Answer 1

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

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

Firebase Hosting 400错误请求

1 个答案: