如何将vanillaJS NPM脚本添加到Nuxt插件？

我在获取AWS S3将图像直接保存到AWS S3时遇到问题。

我尝试将AWS包作为插件导入，但不起作用。

我的nuxt.config.js中有以下内容

plugins: [
  ...
  '~plugins/S3.js'
],

在我的plugins/s3.js

import vue from "vue"
import S3 from "aws-s3";
vue.use(S3)

我尝试在我的文件中使用它

const S3Client = new S3(config)
S3Client
.uploadFile(file, this.getRandomName(10))
.then(data => {
    console.log(data)
})
.catch(err => {
    console.log(err)
})

我收到错误

MultiplePhooupload.vue？7624：110未捕获(承诺中)参考错误：未定义S3

如果我将其直接写入我的组件，则它已定义并且正在工作

import S3 from "aws-s3";

---

解决方案

如果您想将其用作Nuxt插件(这将在全球范围内可用，但即使在您不使用它的地方也会增加应用的总捆绑包大小和加载时间)，您可以在s3.js插件中执行此操作

import S3 from 'aws-s3'

export default ({ _ }, inject) => {
  const config = {
    bucketName: 'myBucket',
    dirName: 'photos' /* optional */,
    region: 'eu-west-1',
    accessKeyId: 'ANEIFNENI4324N2NIEXAMPLE',
    secretAccessKey: 'cms21uMxçduyUxYjeg20+DEkgDxe6veFosBT7eUgEXAMPLE',
    s3Url: 'https://my-s3-url.com/' /* optional */,
  }
  inject('s3', new S3(config))
}

您将能够通过Vue组件中的this.$s3访问该实例！

这需要使用不公开Vue方法的包来完成。文档中有更多信息：https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context

---

Josh Deltener在这个问题上有一个great article，有多种方法。

---

如果您希望具有动态选项，还可以将参数传递给您的注入值，如链接的文档中所示。