参考

https://cli.vuejs.org/zh/config/#filenamehashing
https://cli.vuejs.org/zh/config/#productionsourcemap
https://cli.vuejs.org/zh/config/#css-sourcemap

使用方式

1、在项目的跟目录下创建vue.config.js文件
2、按需添加如下配置

module.exports = {
 filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
 productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
 // css相关配置
 css: {
   extract: false, // 是否使用css分离插件 ExtractTextPlugin
   sourceMap: true // 开启 CSS source maps?
 }
}

自用心得

filenameHashing 文件名哈希化——生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
sourceMap 资源地图——用来定位浏览器控制台输出语句在项目文件的位置，帮助开发人员debug。
开启后，打包生成的 js 文件会有对应的 .map 文件。
filenameHashing、productionSourceMap、css.sourceMap 关闭和开启时，生成的文件对比图

输出语句的对应代码位置，如图所示

注意事项

1、使用filenameHashing，同时要求 index 的 HTML 是被 Vue CLI 自动生成的，会自动引入对应的js和css文件。
2、css.extract开启的话，会分离组件中的css部分，生成独立的css文件，而且会进行压缩，所以可能会导致css.sourceMap貌似失效的问题。因此，在使用css.sourceMap时，建议关闭css.extract。