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

Question

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

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

我的nuxt.config.js有以下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执行此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

---

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