要部署Angular 6应用后,Firebase Hosting显示自定义页面而不是默认的欢迎页面,您可以按照以下步骤进行操作:
在Angular 6应用的根目录中创建一个名为404.html
的文件,用于替代Firebase Hosting的默认欢迎页面。
在404.html
文件中添加您想要显示的自定义内容。例如,您可以添加一些HTML、CSS和JavaScript代码来创建一个自定义的欢迎页面。
Welcome to My Angular App
Welcome to My Angular App
This is a custom welcome page for my Angular 6 app deployed on Firebase Hosting.
打开命令行界面,并导航到您的Angular 6应用的根目录。
使用Firebase CLI(命令行界面)登录您的Firebase帐户。如果尚未安装Firebase CLI,请使用以下命令进行安装:
npm install -g firebase-tools
然后使用以下命令登录:
firebase login
firebase init
选择您的Firebase项目并选择Firebase Hosting作为要设置的功能。
在初始化过程中,您将被要求选择公共目录。输入您Angular 6应用中的dist
目录作为公共目录。例如,默认情况下,Angular CLI将生成的构建文件放在dist/
目录中。
接下来,Firebase CLI将询问是否将现有的index.html
文件覆盖为Firebase Hosting的默认欢迎页面。选择No
以保留现有的index.html
文件。
完成初始化后,运行以下命令构建您的Angular 6应用:
ng build --prod
这将在dist/
目录中生成一个生产就绪的构建。
firebase deploy
完成部署后,您的Angular 6应用将通过Firebase Hosting进行托管,并且当访问您的网站时将显示自定义的欢迎页面(即404.html
文件)。