Webpack转Vite后，Vue项目导入本地组件库报导出不存在错误

问题原因 #

从Webpack迁移到Vite后出现导出报错，核心原因是Vite基于原生ESM规范解析模块，对CommonJS的导出处理比Webpack严格：

• 你导入的library.js是CommonJS格式，Vite不会自动转换其导出结构，导致无法识别Plugin或default导出；
• 虽然你有ESM版本的library.mjs，但默认导入的是.js后缀文件，Vite会按CommonJS处理它。

解决方案 #

方案1：直接导入ESM版本文件 #

修改main.js中的导入路径，指定使用ESM格式的library.mjs，Vite能正确识别其导出：

// 命名导出场景
import { Plugin as AtxVue3Plugin } from '../dist/library.mjs';
demoApp.use(AtxVue3Plugin);

// 默认导出场景
import AtxVue3 from '../dist/library.mjs';
demoApp.use(AtxVue3);

方案2：配置Vite转换CommonJS模块 #

在项目根目录的vite.config.js中添加optimizeDeps配置，让Vite提前将你的CommonJS库转换为ESM格式：

export default {
  optimizeDeps: {
    include: ['../dist/library.js'] // 指定需要转换的本地库
  }
}

配置后重启Vite服务，即可正常使用原导入路径。

方案3：优化Rollup构建配置 #

调整组件库的Rollup配置，确保CommonJS版本的导出符合Vite的兼容要求：

// 组件库的rollup.config.js示例
export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/library.js',
      format: 'cjs',
      exports: 'auto' // 自动处理导出映射，生成Vite可识别的CommonJS导出
    },
    {
      file: 'dist/library.mjs',
      format: 'es'
    }
  ]
}

exports: 'auto'会让Rollup自动处理导出，确保CommonJS版本中同时生成正确的exports.default和exports.__esModule标记，让Vite能识别默认导出。

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