javascript - 如何告诉 Vue 应用使用 Firebase 模拟器？

Question

我有一个利用 Firebase Cloud Functions 的 Vue 应用程序，我已将其配置如下。
src/plugins/firebase.js

import firebase from '@firebase/app'
import '@firebase/firestore'
import '@firebase/auth'
import '@firebase/functions'

const firebaseConfig = {
  apiKey: 'my-api-key',
  authDomain: 'my-project.firebaseapp.com',
  databaseURL: 'https://my-project.firebaseio.com',
  projectId: 'my-project',
  storageBucket: 'my-project.appspot.com',
  messagingSenderId: '12345678910',
  appId: '123456789101112',
  measurementId: 'ASDFJKL'
}

firebase.initializeApp(firebaseConfig)

export default firebase

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Other imports goes here
import firebase from './plugins/firebase'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  // Other includes goes here...
  firebase,
  render: h => h(App)
}).$mount('#app')

我想使用 Firebase 模拟器来测试，但我不知道要改变什么来实现这一点。

Answer 1

好的，所以这将是一个很长的答案，但我希望尽可能完整地回答您的问题。该过程实际上分两个阶段进行:使模拟器(包括热重新加载)与 Vue 一起工作，然后使 Vue 与 Firebase 的模拟版本一起工作。

第 1 步:使 Firebase 模拟器与 Vue 一起工作
第一步，您需要编辑您的 package.json将 Vue 设置为执行监视/构建周期而不是热重载周期，如下所示。唯一不起作用的(AFAIK)是 Vue DevTools 扩展。 (快速注意，我正在使用的 run-s 和 run-p 命令来自 npm-run-all 包，因为我在 Windows 上并且 cmd.exe 不喜欢单个 & 符号 & )。此外，要使用 firebase从你的脚本命令，你需要安装 firebase-tools包作为开发依赖项。

"scripts": {
  "build": "vue-cli-service build",
  "build:dev": "vue-cli-service build --mode development",
  "build:watch": "vue-cli-service build --mode development --watch --no-clean",
  "lint": "vue-cli-service lint",
  "serve": "run-s build:dev watch",
  "serve:firebase": "firebase serve",
  "watch": "run-p build:watch serve:firebase"
}

安装所需的开发依赖项

  npm i --save-dev firebase-tools npm-run-all

所以，很多。让我分解每个命令在做什么:

watch : 这个命令只是让一切顺利进行的 shell 命令。它运行 build和 serve串联命令。稍后会详细介绍

serve :此命令启动实际的监视/构建周期。它启动 Firebase 模拟器并启动 vue-cli-service观察变化。

serve:firebase :这个命令启动 Firebase 模拟器......就是这样。

build :这个命令进行生产构建......这里没有真正使用，但为了完整起见，它被留下了。

build:dev : 这个命令有点重要。如果您注意到，在最初的 watch脚本，我们称之为 build:dev先写脚本。这是因为如果您启动 Firebase 模拟器并且您的“公共(public)”目录(注意:这是 Firebase 的公共(public)目录，而不是 Vue 的)被删除，那么 Firebase 实际上会崩溃。因此，为了解决这个问题，我们在开始构建/观察周期之前完成了构建。

build:watch : 这就是热重装魔法发生的地方。我们告诉 vue-cli-service构建应用程序，还要注意更改而不是清理构建目录。监视更改启动前面提到的监视/构建周期。我们告诉它不要清理构建目录，因为 Firebase 不关心目录中的文件是否从更改中提供服务，但如果目录被删除，它会崩溃。

这种方法的唯一缺点是 Vue DevTools 不起作用。

第 2 步:使 Vue 与 Firebase 模拟器一起工作
多亏了 Firebase Documentation，这个问题实际上有一个非常简单的解决方案。 .您需要做的是从 Firebase 保留 URL 请求一个特殊文件。在我的示例中，我使用 Axios，但无论如何，请随意使用任何库来发出您想要的请求。

import axios from 'axios';
import firebase from '@firebase/app';
import '@firebase/auth';
import '@firebase/firestore';
import '@firebase/functions';

axios.get('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.data);
});

export default firebase;

此外，要向 Vue 实例添加属性，最好这样做，以避免垃圾收集或命名冲突的任何问题。然后，在任何 Vue 组件中，您都可以使用 this.$firebase .

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import firebase from './plugins/firebase';

Vue.config.productionTip = false;
Vue.prototype.$firebase = firebase;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

理想情况下，有一些方法可以区分应用程序是否在模拟器中运行，但实际上它解决的唯一问题是使用 Vue DevTools 扩展的能力，我并不真正看到(双关语)作为要求。但是，完成所有这些后，您应该可以在模拟器中启动并运行，并进行实时重新加载；而且，最重要的是，一旦您准备好，您无需对应用程序进行任何更改即可部署它。

奖励:部署
因此，这里是另一个脚本部分，它具有与上述所有相同的内容，但还包括一个 1-command deploy 以确保您将生产构建从 Vue 部署到 Firebase。

"scripts": {
  "build": "vue-cli-service build",
  "build:dev": "vue-cli-service build --mode development",
  "build:watch": "vue-cli-service build --mode development --watch --no-clean",
  "deploy": "run-s build deploy:firebase",
  "deploy:firebase": "firebase deploy",
  "lint": "vue-cli-service lint",
  "serve": "run-s build:dev watch",
  "serve:firebase": "firebase serve",
  "watch": "run-p build:watch serve:firebase"
}