如何告诉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进行监视/构建周期，而不是热重载周期，如下所示。就我所知，唯一不起作用的是Vue注入的环境变量，但是我尚未对此进行测试。 （快速说明，我使用的run-s和run-p命令来自npm-run-all程序包，因为我在Windows上，并且cmd.exe不喜欢单与号&）。另外，要在脚本中使用firebase命令，您需要将firebase-tools作为dev依赖项进行安装。

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

所以，很多。让我细分每个命令的作用：

• [watch：此命令只是使一切顺利的shell命令。它依次运行build和serve命令。
• serve：此命令开始实际的监视/构建周期。它启动Firebase仿真器，并启动vue-cli-service来监视更改。
• [serve:firebase：此命令启动Firebase模拟器...就这样。
• build：此命令有点重要。如果您注意到，在初始watch脚本中，我们首先调用了build脚本。这是因为如果您启动Firebase模拟器和您的“公共”目录（请注意：这是Firebase的公共目录，而不是Vue的目录），则Firebase实际上会崩溃。因此，为了解决这个问题，我们在开始构建/监视周期后完成构建[[before。
• 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.json());
});

export default firebase;

理想情况下，有某种方法可以区分应用程序是否在仿真器中运行，但实际上，它要解决的唯一问题是使用Vue DevTools扩展的能力，我并没有真正看到它（预期）。但是，所有这些都没有了，您应该在模拟器中启动并运行，并进行实时重载；而且，最重要的是，一旦准备就绪，您无需对应用程序进行任何更改即可部署它。
奖励：部署
因此，这是另一个脚本部分，具有与上述相同的所有功能，但还包含一个命令部署，以确保您将生产版本从Vue部署到Firebase。
"scripts": {
  "watch": "run-s build serve",
  "serve": "run-p build:watch serve:firebase",
  "serve:firebase": "firebase serve",
  "build": "vue-cli-serve build",
  "build:watch": "vue-cli-service build --watch --no-clean",
  "deploy": "run-s build deploy:firebase",
  "deploy:firebase": "firebase deploy"
}