File location mapping error caused by duplicate name of sourcemap file of vue-cli project
webpack will place all source codes in the same directory, and the index files in different directories in the project are overwritten, resulting in the incorrect mapping relationship between the line and file during debugging.
Solution
Using module-eval-source-map
- document:
= {
configureWebpack: {
// Handle SourceMap location errors caused by file with the same name devtool: .NODE_ENV === 'production' ? '' : 'module-eval-source-map',
}
}cheap-module-eval-source-map: No column map is generated, only the number of rows is mapped, so the above problem cannot be solved
vue source-map setting, @ symbol use
Source Map
Source Map is an information file that stores the location information of the error. As long as it is available, when an error occurs, it can be directly located to the original code at the development time, rather than the compressed and converted code.
It is extremely convenient for us to test and needs to be set inside.
- Development Model
= {
//In the development and debugging stage, it is recommended to set the value of devtool to eval-source-map devtool:'eval-source-map',
}- Actual release
= {
// When actually publishing, it is recommended to set the value of devtool to nosources-source-map or turn off sourceMAP devtool:'nosources-source-map',
}@Symbol Search File
Need to be set inside.
= {
resolve: {
alias: {
//@ symbol means that src is the first level directory for searching files '@': (__dirname, './src/')
}
}
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.