Vite库模式打包含第三方UI库时出现vue default导出不存在错误

我用Vite的library模式打包项目，当库中包含vue-loading-overlay这类第三方UI库时，会报错：The requested module '/node_modules/.vite/deps/vue.js' does not provide an export named 'default'，但moment.js这类库却没有异常。以下是我的vite.config.js配置，请问这个配置有问题吗？

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path"; // 注：原配置漏了此导入，运行会报错

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, "src/lib.ts"),
      name: "my-ui-lib",
      fileName: "my-ui-lib",
    },
    rollupOptions: {
      external: ["vue"],
      output: [
        {
          format: "es",
          exports: "named",
          globals: { vue: "vue" },
        },
      ],
    },
  },
});

问题分析与解决 #

• 问题根源：你配置里的rollupOptions.output.exports设为"named"，强制输出命名导出，但vue-loading-overlay这类Vue UI库大多是基于Vue的默认导出（import Vue from 'vue'）编写的。你把Vue标记为外部依赖，又限制了导出类型，导致第三方库找不到Vue的default导出，从而触发错误。而moment.js本身的导出逻辑和"named"配置兼容，所以没出问题。

• 解决方案：

  1. 调整导出策略：将exports: "named"改为exports: "auto"，让Rollup自动判断并适配不同的导出类型，同时兼容命名导出和默认导出场景。
  2. 按需处理第三方依赖：如果希望vue-loading-overlay作为外部依赖（不打包进你的库），需要把它加入external数组，并在globals中配置对应的全局变量；如果要把它打包进库，就不用添加到external，但仍需修改exports配置。

修改后的核心配置片段：

rollupOptions: {
  // 若要外部化vue-loading-overlay则保留，否则移除该项
  external: ["vue", "vue-loading-overlay"],
  output: [
    {
      format: "es",
      exports: "auto",
      globals: { 
        vue: "vue",
        "vue-loading-overlay": "VueLoadingOverlay" // 对应库的全局变量名，需匹配实际情况
      },
    },
  ],
},

另外注意：原配置中未导入path模块的resolve方法，打包时会直接报错，必须补上import { resolve } from "path";。

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