不能在 Nuxt 页面/组件中使用新安装的插件（节点模块）

Question

首先，我是 NuxtJS 和一般前端开发的初学者，所以可能是我遗漏了一些东西——尽管我相信我在发帖之前已经通过了所有选项。如果不是这样，请提前道歉。

我在使用已注册为插件的已安装模块时遇到了问题。例如，以

mapbox-sdk

.

使用

npm install @mapbox/mapbox-sdk

安装后，在

@mapbox/mapbox-sdk

中正确创建

node_modules

，我在

nuxt.config.js

中注册它：

  plugins: [
    ...
    "~/plugins/mapbox-sdk.js",
  ],

当然，我也在

mapbox-sdk.js

中创建了

plugins/

文件，包含：

import "@mapbox/mapbox-sdk";

然后，在页面中（例如，

myMap.vue

），当我尝试：

var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });

这是文档中的基本用法示例，我得到：

mapboxSdk is not defined

在控制台中。此行为扩展到我今天安装的每个模块，但我以前安装的模块不是这种情况。

Answer 1

你得到错误

mapboxSdk is not defined

的原因是因为你设置这个插件的方式有一些问题。

文档在这里https://nuxtjs.org/docs/2.x/directory-structure/plugins/，他们有一些有用的图表。

有几种方法可以使用这个包。

插件

// ~/plugins/mapbox-sdk.js
import mapboxSdk from '@mapbox/mapbox-sdk'

export default (_ctx, inject) => {
  // Exposing the mapboxSdk to your Nuxt app as $mapBox.
  inject('mapBox', mapboxSdk)
}

然后在

nuxt.config.js

，和你已经做的一样。

plugins: [
  ...
  "~/plugins/mapbox-sdk.js",
],

然后在你的组件中

myMap.vue

var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });

---

直接在组件中：

如果您不想使用插件，@kissu 上面提到的方式 https://stackoverflow.com/a/67421094/12205549 也可以。

Answer 2

尝试在导入之后添加这个，让 Vue 首先知道这个方法存在（在同一个

.vue

文件中）

<script>
import mapboxSdk from '@mapbox/mapbox-sdk'
export default {
  methods: {
    mapboxSdk,
  },
  mounted() {
    console.log('mapbox function >>', mapboxSdk)
  },
}
</script>

一开始你让它在

.vue

组件中工作吗？