Vue.js setup()中能否通过import直接引入smtp.js的CDN资源？

DevOps 小满

2026-7-24

问题解答

不能直接通过import "https://smtpjs.com/v3/smtp.js";这种方式引入，原因和可行方案如下：

为什么不行？

smtp.js提供的CDN脚本是IIFE格式（立即执行函数），加载后会把Email对象挂载到全局window上，并不符合ES模块规范。ES的import语法要求引入的资源必须是标准ES模块（带有export声明），直接用import引入这个脚本会触发加载错误。

可行的解决方法

方法1：在全局HTML中引入脚本（官方推荐）

在项目的public/index.html文件的<head>或<body>末尾添加官方要求的script标签：

<script src="https://smtpjs.com/v3/smtp.js"></script>

之后在Vue组件的setup语法中，直接调用全局的window.Email即可：

export default {
  setup() {
    const sendTestEmail = () => {
      window.Email.send({
        Host: "smtp.example.com",
        Username: "your-email@example.com",
        Password: "your-password",
        To: "recipient@example.com",
        From: "your-email@example.com",
        Subject: "Test Email",
        Body: "This is a test email sent via SMTP.js in Vue"
      });
    };

    return { sendTestEmail };
  }
};

方法2：在组件中动态加载脚本

如果不想修改全局HTML，可以在组件的生命周期钩子中动态创建script标签加载资源：

import { onMounted } from 'vue';

export default {
  setup() {
    let emailInstance = null;

    onMounted(() => {
      const script = document.createElement('script');
      script.src = "https://smtpjs.com/v3/smtp.js";
      script.onload = () => {
        emailInstance = window.Email;
      };
      document.body.appendChild(script);
    });

    const sendEmail = () => {
      if (!emailInstance) {
        console.error("SMTP.js尚未加载完成");
        return;
      }
      emailInstance.send({
        // 邮件配置参数
      });
    };

    return { sendEmail };
  }
};