如何在 Nuxt 中导入和使用 @Google/maps npm 包？答案

【问题标题】：How to import & use @Google/maps npm package in Nuxt?如何在 Nuxt 中导入和使用 @Google/maps npm 包？
【发布时间】：2020-02-07 23:09:11
【问题描述】：

我有一个 npm 包，@Google/maps，我想将它用作我的应用程序的一部分。但不幸的是，该包是在节点服务器上使用的。

但是我有一个没有服务器的 spa Nuxt 应用程序，我怎么还能使用它呢？另外，我不想求助于其他 vue npm 包。

这是我目前所拥有的：

~/plugins/server-only.js

import Vue from 'vue'

const GoogleClient = require('@google/maps')

Vue.use(GoogleClient)

~/components/organisms/helloWorld.vue

// ... Vue template

// Vue Js
export default {

  mounted() {
  
    console.log(this.$GoogleClient); // undefined

  }

}

我想归根结底就是这个。如何导出 Google 地图以便将其导入客户端 vue 组件？

谢谢

【问题讨论】：

【解决方案1】：

在你的 nuxt.config 文件中，尝试添加这个

plugins: [
    {src: '~/plugins/server-only.js', ssr: false},
  ],

然后，在 <client-only> 标记内调用 .vue 文件中的组件。

我想这会解决你的问题。

【讨论】：

为什么我要为需要外部客户端的东西设置 ssr false？我也不能进入client-only，因为我需要在挂载时调用createClient() 方法。