nuxt-mail

為 Nuxt.js 應用添加發送電子郵件的功能。新增一個伺服器路由、一個注入變數，並使用 nodemailer 傳送電子郵件。
7.4K 下載301 星v7.0.1
dword-designdword-design

nuxt-mail

npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
Open in Gitpod Buy Me a Coffee PayPal Patreon

為 Nuxt.js 應用添加發送電子郵件的功能。新增一個伺服器路由、一個注入變數，並使用 nodemailer 傳送電子郵件。

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

ℹ️ 資訊：這個模組是在 Nuxt 2 時代構建的，當時構建伺服器路由需要額外的工作。在 Nuxt 3 中，這變得容易得多，所以這個模組基本上只適用於簡單的聯絡表單。如果你想構建更復雜的東西，我建議直接使用 nodemailer 或 nuxt-nodemailer。

安裝

# 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: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    }],
  ],
  // or use the top-level option:
  mail: {
    message: {
      to: '[email protected]',
    },
    smtp: {
      host: "smtp.example.com",
      port: 587,
    },
  },
  // or use runtimeConfig
  runtimeConfig: {
    mail: {
      message: {
        to: '[email protected]',
      },
      smtp: {
        host: "smtp.example.com",
        port: 587,
      },
    },
  },
}

smtp 選項是必需的，並直接傳遞給 nodemailer。有關可用選項，請參閱其文件。此外，你必須透過 message 配置至少傳遞 to、cc 或 bcc。這是出於安全考慮，這樣客戶端就無法從你的 SMTP 伺服器向任意收件人傳送電子郵件。你實際上可以透過 message 配置預配置郵件，因此如果你總是想傳送相同主題或發件人地址的電子郵件，你可以在此處進行配置。

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

Nuxt 3

透過可組合項

<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>

多條訊息配置

透過將 message 配置更改為陣列，也可以提供多個訊息配置。

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

然後你可以像這樣引用配置

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: '[email protected]',
          pass: '<app-specific password>',
        },
      },
    }],
  ],
}

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

缺少什麼？透過 拉取請求 在此處新增您的服務。

除錯郵件錯誤

如果郵件未傳送，您可以使用瀏覽器開發工具除錯錯誤。如果丟擲 500 錯誤（檢查控制檯輸出），您可以在“網路”選項卡中找到錯誤訊息。對於 Chrome 使用者，請開啟“網路”選項卡，然後找到“傳送”請求。開啟它並選擇“響應”選項卡。在那裡應該顯示錯誤訊息。在大多數情況下，它與 SMTP 伺服器的身份驗證有關。

未解決的問題

“證書鏈中的自簽名證書”錯誤

有一個問題會丟擲上述錯誤。如果有人知道解決方案，我們將不勝感激 😍。

貢獻

你是否缺少某些功能或想貢獻？歡迎隨時提交問題或拉取請求！⚙️

支援

大家好，我是 Sebastian Landwehr，一名自由網路開發者，我喜歡開發網路應用和開源包。如果您想支援我，讓我能持續更新包並構建更多有用的工具，您可以在這裡捐贈

給我買杯咖啡  如果您想一次性捐贈。咖啡很不錯 😊。
PayPal  如果您喜歡 PayPal，也可以進行一次性捐贈。
Patreon  您可以在這裡定期支援我，這非常棒，這樣我就可以持續地從事專案。

非常感謝您的支援！❤️

另請參閱

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

許可證

MIT 許可證 © Sebastian Landwehr