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

Question

我无法让 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)
})

我得到了错误

multiplephotoupload.vue?7624:110 Uncaught (in promise) ReferenceError: S3 is not defined

如果我直接将它写入我的组件中，则它已定义并且可以正常工作

import S3 from "aws-s3";

Answer 1

如果您想将它用作 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 在这个有各种方法的。

---

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