The problem with the placement of vUE project breakpoints

You can see the following description in the configuration of WebPack Devtool:

configureWebpack

Type: Object | Function

If the value is an object, it is merged into the final configuration using webpack-Merge.

If the value is a function, the parsed configuration is accepted as an argument. This function can either modify the configuration and return nothing, or it can return a cloned or merged version of the configuration.

Devtool: ‘source-map’

Some of these values are appropriate for development environments and some are appropriate for production environments. For development environments, faster source maps are usually added to the bundle at the cost of increasing volume, but for production environments, more accurate source maps need to be separated from the bundle and exist independently.

At this point, our project comments out the configuration items in this section, so we use the default configuration:

At this point the break point may be out of position,

It is also mentioned in the Vue documentation that to display the source code in a browser, you need to update the WebPack configuration to build the Source Map and re-run the project after the update.

When we write code, there will be a lot of index.vue files, breakpoints will be triggered at run time, but what is the reason for jumping to other file style files, one of the reasons is the same name file, after we set source-map change packaging will avoid this problem.