Vue2项目source map指向vue.runtime.esm.js而非.vue组件文件如何解决

不需要安装额外的source map相关依赖，该问题由配置冲突、vue-loader sourceMap未显式开启导致，按以下步骤修改配置即可解决：

1. 移除冲突配置 #

你之前自定义的devtoolModuleFilenameTemplate、devtoolFallbackModuleFilenameTemplate规则会打断Vue单文件组件的source map路径映射，导致浏览器无法正确关联到.vue原始文件，首先删除这部分配置。

2. 配置正确的devtool并开启vue-loader sourceMap #

开发环境推荐使用cheap-module-source-map作为devtool，同时显式开启vue-loader的sourceMap开关，修改后的完整vue.config.js如下：

module.exports = {
  assetsDir: "",
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        sassOptions: {},
      },
    },
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = "cheap-module-source-map";
    }
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      // 显式开启vue-loader的sourceMap能力
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.sourceMap = true
          return options
        })
    }
  }
};

3. 异常排查项 #

如果修改配置后仍未生效，检查以下规则：

• vue-template-compiler版本必须和vue版本完全一致，版本号差异会导致单文件组件编译后的行号偏移
• 开发环境不要开启任何代码压缩、混淆、tree-shaking类优化插件，这类操作会破坏source map的行号映射关系
• 检查浏览器开发者工具的设置页，确认「启用JavaScript source map」「启用CSS source map」两个开关已开启

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