[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZLdNnwzG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/3maa62nhv0t1nk00yokw.jpg)

Pexels 上的 Prateek Katyal 拍摄的照片######

我总是_忘记_如何在 Firebase 托管过程中部署 Vue 或 React 等 SPA 应用程序,这个过程很容易,所以我最终决定为需要它的人和我自己制作一个教程。

本教程将涵盖哪些内容?

• 设置 Firebase 托管项目

• 安装 Firebase CLI

• 使用环境变量配置本地项目

• 使用 Firebase CLI 工具初始化 Firebase 项目

• 部署您的应用程序

我们有两种方法来进行设置。它可以使用网站或firebase-cli

第 1 步 - 注册

首先我们需要将我们的项目注册到firebase

[](https://res.cloudinary.com/practicaldev/image/fetch/s--RBIgxtgs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com /JesusRMendez/DevTo/master/firebase-create-project.png)

第 2 步 - 安装 Firebase CLI

npm install -g firebase-tool

第 3 步 - 使用 Firebase 客户端登录

firebase login

因此,浏览器将打开以使您能够选择您的 Google 帐户。完成身份验证过程后,将显示以下网页。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--AEVZ6sBt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com /JesusRMendez/DevTo/master/firebase-cli-sucess.png)

首先,如果你已经有了你的项目,你只需要添加文件:

• .env.development

• .env.production

该文件的内容是:

VUE_APP_FIREBASE_API_KEY=''
VUE_APP_FIREBASE_DOMAIN=''
VUE_APP_FIREBASE_DB_URL=''
VUE_APP_FIREBASE_PROJECT_ID=''
VUE_APP_FIREBASE_STORAGE_BUCKET=''
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=''
VUE_APP_FIREBASE_API_ID=''
VUE_APP_FIREBASE_MEASUREMENT_ID=''

当然,您可以填充正确值的每个文件都取决于环境。

请注意,所有以VUE_APP_开头的变量都将静态嵌入到带有webpack.DefinePlugin的客户端包中

现在,我们在本地项目应用目录中使用 Firebase-CLI 工具初始化 firebase 项目,执行以下命令。

firebase init

• Step 1 我们选择_Hosting_

输出:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WwivJGmw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com /JesusRMendez/DevTo/master/firebase-cli-init.png)

• Step 2 下一步我们询问是否不会使用现有项目或从控制台创建新项目,对于本教程,我们选择:使用和现有项目。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--0-FxtNWJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent .com/JesusRMendez/DevTo/master/firebase-association-project.png)

• 第 3 步 下一步是应用程序部署站点的位置,vuejs 部署文件夹的默认设置是dist,当 firebase-cli 询问public directory我们回答写为dist。

输出:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--wiRpgcP2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com /JesusRMendez/DevTo/master/firebase-setting.png)

注意:如果稍后我们想更改dist的输出位置,我们只更新了文件firebase.json

所以,最后的部署我们只需要执行两个命令来构建我们的 Vue 项目并部署:

npm run build && firebase deploy

我们期待下一个输出:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--_j2V5Mn---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent。 com/JesusRMendez/DevTo/master/output-vue-build.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qkuFZejZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com /JesusRMendez/DevTo/master/output-vue-deploy.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9ONCyf-p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent .com/JesusRMendez/DevTo/master/firebase-deploy-webpage.png)