Firebase托管部署Angular 6应用后显示欢迎页面?

14

我想开发Angular 6应用程序,但在部署Firebase后只显示欢迎页面。

以下是我采取的步骤:

  1. 安装Firebase工具
  2. 在我的应用程序中运行ng build --prod
  3. 运行firebase init
  4. 你准备好继续吗?(Y/n)y
  5. (*) Hosting:配置和部署Firebase Hosting站点
  6. 您希望将什么作为公共目录?(public)dist
  7. 将其配置为单页应用程序(将所有url重写为/index.html)?(y/N)y
  8. 文件dist / index.html已存在。覆盖吗?(y/N)y
  9. Firebase初始化完成!
  10. 在这一步中,我删除了dist文件夹并再次运行了ng build --prod
  11. angular将应用程序构建到位于dist文件夹内的子文件夹中,因此我将包含index.html的子目录中的全部内容复制到dist/中。
  12. 运行firebase deploy
  13. 运行firebase open hosting:site

但即使我做了所有这些,链接中仍然只显示欢迎页面。

我做错了什么?

11个回答

22

尝试: 8. 文件dist/index.html已经存在。覆盖?(y/N) N并在隐身模式下打开应用程序的链接。严肃地说,我卡了好几个小时,因为在我的情况下,这个Firebase索引被缓存了,所以这就是为什么我在部署后看不到我的应用程序的原因。


为什么它在隐身模式下能够工作? - XXIV
你也可以按住Shift键然后点击刷新,这样可以清除该页面的缓存。 - undefined
因为问题在于浏览器中缓存了默认的“Firebase Hosting Complete”页面(换句话说,本地存储),所以它并没有实际查看新的index.html文件的内容,而是直接使用本地存储的文件。无痕模式不使用缓存页面。 - undefined

5
问题: Firebase正在寻找index.html文件,但有时它不会直接出现在dist目录中。 解决方案: 更新firebase.json中的public路径为"public":"dist/ProjectName"或指向dist文件夹中index.html文件的路径。

示例:

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

3
对我来说,我必须将“public”值更改为“build/web”,但这起作用了!也许是因为我正在使用Flutter构建我的应用程序? - Max

2

浏览器缓存也是我的问题。如上所述,请尝试使用隐身模式或使用proxysite.com(非常有用的网站)以避免浏览器缓存。


1
在我的情况下,我不得不在 firebase.json 中将 public 更改为 dist,这样它就指向了我的 dist 文件夹(而不是包含占位页面的 public 文件夹),因为我已经将 Firebase Functions 添加到了我的项目中。
"hosting": {
   "public": "dist",
   ...
}


1
在我的情况下,我正在项目目录(src)中初始化firebase。只需检查您所在的目录即可。它应该在顶层。
构建并尝试部署后,由于网页已被缓存,因此它将保持不变。所以要确保在隐身模式中使用。

0

将其配置为单页应用程序(将所有URL重写为/index.html)?不

  • 编写public/404.html文件?公共/ index.html文件已存在。 覆盖?不

此错误是由您网站文件夹中的public文件夹内的index.html文件生成的。


0

在终端上检查路径。如果问题仍然存在,则删除 Firebase 自动创建的文件夹并部署项目。


0
欢迎页面是在“public”文件夹中自动生成的index.html文件。我用自己的index.html文件替换了该文件,然后使用“firebase deploy --only hosting”命令更新更改。

0

首先,您应该登录Firebase登录 然后编写命令firesbe init

第一步

  1. 您想将什么用作公共目录?(public)dist/projectname
  2. 文件dist/index.html已经存在。 覆盖?(y/N)N

完成此过程后, 您应该运行(npm run build)命令并生成构建文件。 之后,您应该转到firebase.json并将构建文件夹放在公共目录中

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

最后但并非最不重要的是firebase deploy。它完美地工作。


-1

firebase init hosting ? 文件 build/index.html 已经存在。是否覆盖?否 npm run build firebase deploy --only hosting


目前你的回答不够清晰,请编辑并添加更多细节,以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Antoine Xevlabs

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接