Vue 3 - app.config 未定义。如何绕过这个错误？

Question

我正在按照文档执行所有操作，但控制台中仍然出现错误。我正在尝试的是创建一个 Firebase 实例的全局变量。

main.js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import firebase from 'firebase'
require('firebase/firestore')

const config = {
    // config
}

firebase.initializeApp(config)

const app = createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

console.log(app.config) // undefined
app.config.globalProperties.$firebase = firebase;

为什么是undefined？或者我应该在 config 对象中自己覆盖属性 globalProperties 吗？

Answer 1

config 存在于 createApp 的 return 值上，而不是结束 mount 调用：

const app = createApp(App);

app.use(store).use(router).mount('#app');

console.log(app.config); // Not undefined

Answer 2

const app = createApp(App).use(store).use(router).mount("#app") returns root 组件实例 而不是 app 实例 具有字段 config，所以，你应该这样做：

const app = createApp(App)

const rootComponent = app.use(store)
  .use(router)
  .mount("#app");

console.log(app.config) 
app.config.globalProperties.$firebase = firebase;

了解更多差异 here。

Vue 3 - app.config 未定义。如何绕过这个错误？

Vue 3 - app.config is undefined. How to bypass this error?

javascript

vue.js

vuex

vuejs3