Vue3项目中Webpack导出异常变为webpack_exports_.d.e.f.a.u.l.t求助

原因分析 #

这个问题确实由Babel对ES模块导出的转换逻辑导致。Vue CLI默认的Babel预设会将ES模块的default导出转换为符合CommonJS规范的嵌套结构（包含__esModule标记），在开发环境调试模式下，这种转换后的导出结构会被暴露为webpack_exports_.d.e.f.a.u.l.t这类多层嵌套路径。当你禁用Babel仅保留ESLint时，项目直接使用原生ES模块语法，未经过转换，因此问题消失。

解决办法 #

1. 修改Babel配置，保留原生ES模块语法

在项目根目录的babel.config.js中，为Babel预设添加modules: false选项，阻止Babel将ES模块转换为CommonJS：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', { modules: false }]
  ]
}

该配置会让Babel保留原生import/export语法，避免生成嵌套导出结构。

2. 规范模块导入方式

确保代码中使用正确的default导入语法，避免命名空间导入触发错误导出路径：

// 正确的default导入
import MyComponent from './MyComponent.vue'

// 错误写法（会导致嵌套导出路径问题）
import * as MyComponent from './MyComponent.vue'

3. 通过Vue CLI的chainWebpack调整Babel-loader配置

若需在vue.config.js中统一配置，可通过chainWebpack修改Babel-loader选项：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .tap(options => {
        options.presets[0][1].modules = false
        return options
      })
  }
}

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