Vue2 开发源码映射问题

2025年1月1日

预计阅读：2min

Vue CLI 5 默认使用 vue-loader 17（Vue 3 专用），导致 Vue 2 项目的 source map 无法正确映射，控制台点击无法跳转到 .vue 文件。

解决方案

在 package.json 中添加 overrides：

{
  "overrides": {
    "vue-loader": "15.10.0"
  }
}

然后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

说明：overrides 会强制所有依赖（包括 @vue/cli-service）使用 vue-loader 15.10.0。

配置 source map（可选，vue.config.js）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'cheap-module-source-map'
    }
  },
  
  css: {
    sourceMap: true
  }
})

验证

npm list vue-loader
# 应该显示: vue-loader@15.10.0 overridden

然后在浏览器控制台点击日志，应该能跳转到 .vue 文件。

原因

vue-loader 17 是为 Vue 3 设计的，对 Vue 2 的 source map 支持不完整
overrides 强制所有依赖使用 vue-loader 15，确保兼容性

Edit on GitHub