[
](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)
