如何告诉Vue应用使用Firebase模拟器? [英] How to tell a Vue app to use Firebase emulator?

问题描述

我有一个可以利用Firebase Cloud Functions的Vue应用程序，并且我对其进行了如下配置.

I have a Vue app which takes advantage of Firebase Cloud Functions, and I've configured it as follows.

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模拟器进行测试，但是我不知道要进行哪些更改才能实现此目的.

I want to use Firebase emulator to test things out, but I can't figure out what to change to achieve this.

推荐答案

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

Ok, so this is going to be a long answer, but I'm hoping to answer your question as completely as possible. The process really works in two stages: making the emulator (including hot reloading) work with Vue, then making Vue work with the emulated version of Firebase.

第一步，您需要编辑 package.json ，以设置Vue进行监视/构建周期，而不是热重载周期，如下所示.唯一不起作用(AFAIK)的是Vue DevTools扩展.(请注意，我正在使用的 run-s 和 run-p 命令来自 npm-run-all 包，因为Windows和 cmd.exe 上的m不喜欢单个&符(& ).另外，要在脚本中使用 firebase 命令，您需要将 firebase-tools 软件包安装为dev依赖项.

For the first step, you need to edit your package.json to setup Vue to do a watch/build cycle instead of a hot reload cycle, as shown below. The only thing that won't work (AFAIK) is the Vue DevTools extention. (Quick note, the run-s and run-p commands I'm using are from the npm-run-all package because I'm on Windows and cmd.exe doesn't like single ampersands &). Also, to use the firebase command from your scripts, you need to install the firebase-tools package as a dev dependency.

"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

那么多.让我细分每个命令的作用:

So, that's a lot. Let me breakdown what each command is doing:

• watch :该命令只是使一切顺利的shell命令.它依次运行 build 和 serve 命令.稍后再对此
进行详细说明
• serve :此命令开始实际的监视/构建周期.它会启动Firebase模拟器并启动 vue-cli-service 来监视更改.
• serve:firebase :此命令将启动Firebase模拟器...就这样.

• watch: This command is just the shell command that gets everything going. It runs the build and serve commands in series. More on this later
• serve: This command starts the actual watch/build cycle. It starts the Firebase emulator and starts the vue-cli-service to watch for changes.
• serve:firebase: This command starts the Firebase emulator...that's all.

• build :此命令进行的是生产构建……在这里并未真正使用，但为了完整起见保留.

• build:dev :此命令有点重要.如果您注意到，在最初的 watch 脚本中，我们首先调用了 build:dev 脚本.这是因为，如果您启动Firebase模拟器，并且您的公共"帐户会被启动，目录(注意:这是Firebase的公共目录，而不是Vue的公共目录)，则Firebase实际上会崩溃.因此，为了解决这个问题，我们在开始构建/监视周期之前，先完成构建 .
• build:watch :这是发生热重装魔法的地方.我们告诉 vue-cli-service 来构建应用程序，但还要注意更改并不清理构建目录.监视更改将启动前面提到的监视/构建周期.我们告诉它不要清除构建目录，因为Firebase不在乎该目录中提供服务的文件是否已更改，但是如果删除该目录，它将崩溃.

• build:dev: This command is a bit important. If you notice, in the initial watch script, we called the build:dev script first. This is because if you start the Firebase emulator and your "public" directory (note: this is Firebase's public directory, not Vue's) gets deleted, then Firebase will actually crash. So, to counteract this, we complete a build before starting the build/watch cycle.
• build:watch: This is where the hot reload magic happens. We tell the vue-cli-service to build the app, but also to watch for changes and not clean the build directory. The watching for changes starts the watch/build cycle mentioned earlier. We tell it to not clean the build directory because Firebase doesn't care if the files inside the directory its serving from change, but it will crash if the directory gets deleted.

此方法的唯一缺点是Vue DevTools不起作用.

The only downside to this method is that the Vue DevTools do not work.

由于 Firebase文档.您需要做的是从Firebase保留的URL请求一个特殊文件.在我的示例中，我使用Axios，但是无论如何，请随意使用任何库来发出您想要的请求.

Turns out there is actually a very simple solution to this problem thanks to the Firebase Documentation. What you need to do is request a special file from the Firebase reserved URLs. In my example, I use Axios, but by all means, feel free to use whatever library for making requests you would like.

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 .

Also, to add a property to the Vue instance, it would be better to do this, to avoid any issues with garbage collection or naming collisions. Then, within any Vue component, you can just use 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扩展的能力，我并不真正看过(双关语)作为要求.但是，所有这些都没有了，您应该在模拟器中启动并运行，并进行实时重载；而且，最重要的是，一旦准备就绪，就无需对应用程序进行任何更改即可部署它.

Ideally, there would be some way to distinguish whether the application is running within the emulator or not, but in practice the only problem it would solve is the ability to use the Vue DevTools extension, which I don't really view (pun intended) as a requirement. But, with all of that out of the way, you should be up and running in the emulator, with live reloading; and, to top it all off, once your ready, you don't have to make any changes to your application to deploy it.

因此，这是另一个脚本部分，具有与上述相同的所有功能，但是还包含一个命令部署，以确保您将生产版本从Vue部署到Firebase.

So, here is another scripts section that has all of the same things as above, but also includes a 1-command deploy to make sure you deploy a production build from Vue to 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"
}

这篇关于如何告诉Vue应用使用Firebase模拟器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！