使用Vite创建的Vue3组件库出现导入错误

Vue3采用ES模块规范发布，不再提供default导出，你的组件库自动生成的导入语句import JU, { defineComponent as Ge } from "vue";同时尝试导入默认导出和命名导出，导致宿主应用运行时找不到default导出，抛出SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=44b28b6f' does not provide an export named 'default'错误。

修复步骤：

• 修正Vue导入语句：去掉默认导出的部分，只保留命名导入。如果不需要全局Vue对象，直接改成：

  import { defineComponent as Ge } from "vue";
  

  若需使用Vue的全局API（如创建应用），改用对应的命名导出：

  import { defineComponent as Ge, createApp } from "vue";
  

• 检查组件库构建配置：确保Vite打包时正确处理Vue的依赖，避免将Vue打包进组件库。在vite.config.js中配置rollupOptions：

  export default {
    build: {
      lib: {
        entry: 'src/index.js', // 你的组件库入口文件
        name: 'YourComponentLib',
        formats: ['es', 'umd'] // 根据需求设置输出格式
      },
      rollupOptions: {
        external: ['vue'], // 将Vue标记为外部依赖
        output: {
          globals: {
            vue: 'Vue' // UMD格式下的全局变量名
          }
        }
      }
    }
  }
  

• 重新构建并更新依赖：重新打包组件库，在宿主应用中更新组件库依赖后重启项目。

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