如何將 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

---

如果您想要動態選項，您還可以將參數傳遞給您注入的值，如鏈接的文檔中所示。