Vue-Bootstrap应用部署报错：动态import()语法不被目标环境支持

我正在Vue-Bootstrap应用中配置客户邮件发送功能，原本应用运行正常，但安装firebase、send grid和node mailer包后出现如下报错，测试邮件能正常发送，但无法部署应用，寻求解决办法。

报错信息 #

error  in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

ERROR in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"                                                                                                                                                                   
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
 @ ./src/views/Home.vue 2:0-75 3:0-70 3:0-70 10:2-8
 @ ./src/router/index.js 3:0-37 17:13-17
 @ ./src/main.js 4:0-30 12:2-8

main.js文件内容 #

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

Vue.config.productionTip = false;

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

1. 替换SMTP.js的引入方式 #

报错根源是Home.vue中使用了动态引入外部SMTP模块，而部署环境不支持import()语法。改为传统全局引入：

• 在public/index.html的<head>标签内添加脚本引用：

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

• 删除Home.vue中对该脚本的动态import语句，直接全局调用Email对象完成邮件发送。

2. 修正后端包的使用方式 #

nodemailer是Node.js后端专属包，前端直接引入会触发构建冲突：

• 将邮件发送逻辑迁移至后端服务（比如Firebase Functions），前端仅通过API接口调用后端完成邮件发送。
• 若需前端处理，改用SendGrid官方提供的前端SDK，确保依赖包版本适配Vue 2的构建环境。

3. 调整Webpack构建配置（Vue CLI项目） #

若项目基于Vue CLI，新建或修改vue.config.js，添加Babel转译配置以支持动态import：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
};

同时安装所需Babel依赖：

npm install @babel/core @babel/preset-env babel-loader --save-dev

内容的提问来源于stack exchange，提问作者Jerry