如何在 Vue 3 App 中将 VueGapi 配置为全局

Question

我正在尝试在 Vue 中为 gmail 应用程序使用 VueGapi 插件。这是我的 main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueGapi from 'vue-gapi'

const app = createApp(App).mount('#app')

app.use(VueGapi, {
  apiKey: 'my_key',
  clientId: 'my_client_id',
  discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
  scope: 'https://www.googleapis.com/auth/spreadsheets',
})

当我尝试用 this.$gapi 引用它时，我得到了 Uncaught TypeError: this.$gapi is undefined

对 Vue 有点陌生，如有任何帮助，我们将不胜感激！

Answer 1

.mount 函数不是 return vue 应用程序，这就是为什么你不能在 use 之后。

您必须先 create，然后 use，然后完成 mount：

import { createApp } from 'vue'
import App from './App.vue'
import VueGapi from 'vue-gapi'

const app = createApp(App)

app.use(VueGapi, {
    apiKey: 'my_key',
    clientId: 'my_client_id',
    discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
    scope: 'https://www.googleapis.com/auth/spreadsheets',
})

app.mount('#app')

此外，您还必须确保使用 Vue 3（检查 package.json 中的 vue 版本）并使用相应的 vue-gapi 包 (https://www.npmjs.com/package/vue-gapi)

如何在 Vue 3 App 中将 VueGapi 配置为全局

How to configure VueGapi as global in Vue 3 App

javascript

google-api-js-client

vue.js