Vue.js动态导入ESM模块问题：外部依赖无法解析

问题原因 #

你在Vite打包时将vue、echarts等依赖标记为external，生成的ESM模块中保留了import "vue"这类裸模块导入语句。但通过Blob URL加载的模块处于独立的模块上下文，浏览器默认无法解析裸模块名（仅支持相对/绝对路径的模块导入），因此抛出Failed to resolve module specifier "vue"错误。

方案一：使用Import Maps映射裸模块名 #

通过在客户端HTML中添加importmap，为裸模块名指定可访问的模块路径，让浏览器能正确解析导入语句。

1. 在客户端index.html中添加Import Map

<script type="importmap">
{
  "imports": {
    "vue": "/node_modules/vue/dist/vue.esm-browser.js",
    "echarts": "/node_modules/echarts/dist/echarts.esm.js",
    "vue-echarts": "/node_modules/vue-echarts/dist/vue-echarts.esm.js",
    "@repo/common": "/path/to/your-repo-common.esm.js"
  }
}
</script>

注意：路径需对应客户端项目中依赖的实际位置，且依赖版本需与Widget开发时的版本一致，避免兼容性问题。

2. 保持原有导入代码不变
   你的Blob导入逻辑无需修改，浏览器会自动通过import map解析裸模块。

方案二：将外部依赖转为全局变量引用 #

修改Vite打包配置，将外部依赖的导入语句替换为全局变量引用，同时在客户端将依赖挂载到全局window对象。

1. 安装Rollup注入插件

npm install @rollup/plugin-inject --save-dev

2. 调整Vite打包配置

import inject from '@rollup/plugin-inject';

build({
  plugins: [
    vue(),
    // 注入全局变量替换裸模块导入
    inject({
      Vue: ['vue', 'default'], // 将import Vue from 'vue'替换为window.Vue
      echarts: 'echarts',       // 将import * as echarts from 'echarts'替换为window.echarts
      VueECharts: ['vue-echarts', 'default'],
      // 其他外部依赖同理配置
    })
  ],
  build: {
    lib: {
      entry: [path.resolve(dataComponentsDir, dataComponent, "index.ts")],
      name: dataComponent,
      fileName: (_format) => `${dataComponent}.js`,
      formats: ["es"],
    },
    rollupOptions: {
      external: ["vue", "typeorm", /^@repo\//, "vue-echarts", /^echarts\//],
      output: {
        inlineDynamicImports: false,
        preserveModules: false,
        format: "es",
        exports: "named",
      },
    },
    preserveEntrySignatures: "strict",
    outDir: path.resolve(tempDir, dataComponent),
    emptyOutDir: true,
  },
});

3. 客户端全局挂载依赖
   在客户端入口文件中，将依赖挂载到window：

import Vue from 'vue';
window.Vue = Vue;

import * as echarts from 'echarts';
window.echarts = echarts;

import VueECharts from 'vue-echarts';
window.VueECharts = VueECharts;

// 其他外部依赖同理挂载

4. 执行原有导入逻辑
   此时Blob模块会直接使用全局变量，无需解析裸模块名。

方案三：使用SystemJS加载模块 #

借助SystemJS模块加载器，它支持解析裸模块名并可配置依赖映射。

1. 引入SystemJS到客户端
   在index.html中添加：

<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.min.js"></script>

2. 配置SystemJS依赖映射

<script>
System.config({
  map: {
    'vue': '/node_modules/vue/dist/vue.esm-browser.js',
    'echarts': '/node_modules/echarts/dist/echarts.esm.js',
    // 其他外部依赖映射
  }
});
</script>

3. 修改导入逻辑为SystemJS加载

const moduleText = atob(base64Module);
const blob = new Blob([moduleText], { type: 'application/javascript' });
const moduleURL = URL.createObjectURL(blob);

// 使用SystemJS加载模块
try {
  const module = await System.import(moduleURL);
  // 使用module.default获取Widget导出对象
  const widget = module.default;
  // 后续渲染组件逻辑
} catch(e) {
  console.error(e);
}

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