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>',
        },
      },
    }],
  ],
}

缺少什麼嗎？透過發出 Pull Request在此處新增您的服務。

非常感謝您的支持！❤️

另請參閱

nuxt-route-meta：在建置時將 Nuxt 頁面資料新增至路由 meta。
nuxt-modernizr：將 Modernizr 建置新增至您的 Nuxt.js 應用程式。
nuxt-mermaid-string：透過提供其圖表字串，在 Nuxt.js 應用程式中嵌入 Mermaid 圖表。
nuxt-content-git：@nuxt/content 的其他模組，可根據 git 歷史記錄替換或新增 createdAt 和 updatedAt 日期。
nuxt-babel-runtime：支援 babel 的 Nuxt CLI。靈感來自 @nuxt/typescript-runtime。