How to Relocate Vue CLI Source Maps with Webpack’s SourceMapDevToolPlugin

Background

In a Vue 2.x project the author enabled productionSourceMap so that Sentry could receive .map files and map errors back to the original source code.

Default Behavior

By default Vue CLI writes the generated .map files to the same folder as the compiled JavaScript files, which makes it inconvenient to upload them separately.

Desired Outcome

The goal is to place all source‑map files into a dedicated directory (e.g., .sourcemap) so that they can be uploaded to Sentry or deployed independently.

Problem

Scanning Vue CLI configuration options reveals only the boolean productionSourceMap flag, with no built‑in way to change the output location.

productionSourceMap: true // default

Solution Idea

Since Vue CLI is built on Webpack, the author turned to Webpack’s configuration. The devtool option controls source‑map generation, and the SourceMapDevToolPlugin allows fine‑grained control over the output path.

Key Plugin Configuration

The following four properties are sufficient to redirect source‑maps: test: a RegExp that selects the files to map (e.g., /\.js(\?.*)?$/i) filename: the output pattern, such as

'.sourcemaps/[filebase].map'

publicPath

: path prefix for the generated files, e.g.,

'../'

fileContext

: base directory for the output, e.g.,

'dist'

Putting It Into vue.config.js

The plugin is added via the configureWebpack.plugins array. A minimal example:

// vue.config.js
let webpack = require('webpack');
module.exports = {
  productionSourceMap: true,
  configureWebpack: {
    plugins: [
      new webpack.SourceMapDevToolPlugin({
        test: /\.js(\?.*)?$/i,
        filename: '.sourcemaps/[filebase].map',
        publicPath: '../',
        fileContext: 'dist'
      })
    ]
  }
};

After applying this configuration, the generated source‑maps appear in the .sourcemaps folder as intended.

Additional Tweaks

The author discovered that the productionSourceMap flag must remain true for the plugin to emit maps; setting it to false disables map generation entirely.

Furthermore, the optimization.minimizer.options.sourceMap setting in Webpack also influences whether the JavaScript minifier (UglifyJsPlugin) produces source‑maps. The final fix involved disabling that option when maps were not desired:

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      sourceMap: true // or false depending on need
    })
  ]
}

Running vue-cli-service inspect helped reveal the exact configuration paths that needed adjustment.

Notes

For a complete UglifyJsPlugin configuration, refer to the output of vue-cli-service inspect. Omitting default options may lead to differences from the original build.

Conclusion

By leveraging Webpack’s SourceMapDevToolPlugin and adjusting related optimization settings, developers can control the location of Vue CLI source‑map files, simplifying Sentry integration and production deployment.