nuxt-mail

為 Nuxt.js 應用程式新增電子郵件發送功能。新增伺服器路由、注入變數，並使用 nodemailer 發送電子郵件。

不適用於靜態網站（透過 nuxt generate），因為此模組會建立伺服器路由。

安裝

# npm
$ npx nuxi module add nuxt-mail

# Yarn
$ yarn nuxi module add nuxt-mail

設定

將此模組新增至您的 nuxt.config.js 中的 modules 陣列。請注意將其新增至 modules 而非 buildModules，否則伺服器路由將不會被產生。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: 'foo@bar.de',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: 'foo@bar.de',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

smtp 選項為必填，並直接傳遞至 nodemailer。請參閱其文件以了解可用選項。此外，您必須透過 message 設定傳遞至少 to、cc 或 bcc。這是基於安全考量，如此一來，客戶端就無法從您的 SMTP 伺服器發送電子郵件給任意收件者。您實際上可以透過 message 設定預先設定訊息，因此，如果您總是想要發送具有相同主旨或寄件者地址的電子郵件，您可以在此處進行設定。

此模組會注入 $mail 變數，我們現在使用它來發送電子郵件

Nuxt 3

透過 composable

<script setup>
const mail = useMail()

mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

透過注入變數

<script setup>
const { $mail } = useNuxtApp()

$mail.send({
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})
</script>

透過 Options API

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      })
    },
  },
}
</script>

Nuxt 2

對於 Nuxt 2，您需要安裝 @nuxtjs/axios 並在 nuxt-mail 之前將其新增至您的模組列表

// nuxt.config.js
export default {
  modules: [
    [
      '@nuxtjs/axios',
      ['nuxt-mail', { /* ... */ }],
    }],
  ],
}

然後您可以像這樣使用注入的變數

<script>
export default {
  methods: {
    sendEmail() {
      this.$mail.send({
        from: 'John Doe',
        subject: 'Incredible',
        text: 'This is an incredible test message',
      })
    },
  },
}
</script>

關於生產環境使用的注意事項

當您在生產環境中使用 nuxt-mail 並且您設定了一個反向代理來隱藏您的 localhost 在網域之後時，您需要告訴 @nuxt/axios 您正在使用的基礎 URL。否則，nuxt-mail 將找不到發送路由。請參閱 @nuxt/axios 選項以了解如何執行此操作。最簡單的選項是設定 API_URL 環境變數，或在您的 nuxt.config.js 中設定其他內容

// nuxt.config.js
export default {
  axios: {
    baseURL: process.env.BASE_URL,
  },
}

多個訊息設定

也可以透過將 message 設定變更為陣列來提供多個訊息設定。

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      message: [
        { name: 'contact', to: 'contact@foo.de' },
        { name: 'support', to: 'support@foo.de' },
      ],
      ...
    }],
  ],
}

然後您可以像這樣參考設定

mail.send({
  config: 'support',
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

或透過索引（在這種情況下，您不需要 name 屬性）

mail.send({
  config: 1, // Resolves to 'support'
  from: 'John Doe',
  subject: 'Incredible',
  text: 'This is an incredible test message',
})

此外，此模組不適用於靜態網站（透過 nuxt generate），因為此模組會建立伺服器路由。

設定常見電子郵件服務

Gmail

您必須設定應用程式專用密碼以登入 SMTP 伺服器。然後，將以下設定新增至您的 nuxt-mail 設定。看起來有多種方法可以設定 Gmail，因此最好嘗試這些選項

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        service: 'gmail',
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

// nuxt.config.js
export default {
  modules: [
    ['nuxt-mail', {
      smtp: {
        host: "smtp.gmail.com",
        port: 587,
        auth: {
          user: 'foo@gmail.com',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}