如何创建可通过.mjs文件引入的Vite版Vue组件库？

1. 消除Vite动态导入警告 #

你用完整URL做动态导入时，Vite没法静态分析这个路径，所以弹出了警告。解决方法很直接，在import()里加上/* @vite-ignore */注释即可：

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(async () => {
  const source = 'http://localhost:3000/computedRenderer.mjs';
  const { ComputedRenderer } = await import(/* @vite-ignore */ source);

  // 后续组件渲染逻辑
});
</script>

2. 解决"vue"模块解析错误 #

这个错误的核心原因是：你组件库构建时把Vue设为了external依赖，生成的computedRenderer.mjs里会直接写import 'vue'，但浏览器不识别这种"裸模块名"，必须用相对路径、绝对路径或者CDN URL来引用模块。有两种可行的解决思路：

方案A：把Vue打包进组件库（适合独立分发单个组件） #

修改组件库的vite.config.ts，移除external: ["vue"]配置，这样Vite会把Vue的相关代码打包进mjs里，组件就能独立运行，不需要外部依赖：

// vite.config.ts
build: {
  lib: {
    name: "mylib",
    fileName: "computedRenderer",
    entry: resolve(__dirname, './src/myComp/index.ts'),
  },
  rollupOptions: {
    // 删掉 external: ["vue"] 这一行
    output: {
      // 同时可以删掉 globals 配置，因为不再需要全局变量映射
    },
  },
}

重新构建组件库，把新生成的mjs放到静态服务器中，再导入就不会报错了。

方案B：保持Vue为外部依赖，用Import Map映射模块 #

如果不想把Vue打包进去（减少组件体积），可以在主项目的index.html里添加Vue的ES模块CDN，并用importmap告诉浏览器"vue"对应的CDN地址：

<!-- 主项目的index.html -->
<head>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"
      }
    }
  </script>
</head>

这样浏览器遇到import 'vue'时，会自动去配置的CDN地址加载Vue模块，组件库的external配置保持不变即可。

总结 #

• 警告问题加/* @vite-ignore */就能快速解决
• 模块解析错误二选一：要么把Vue打包进组件库，要么用Import Map映射Vue的CDN地址

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