文章背景：
项目上线之后，源码不能让外网的人看到，假如线上有紧急问题需要排查，有sourceMap就很方便排查了，所以要对sourceMap进行限制，内网可以访问，外网不可以访问，前端需要配合运维对sourceMap进行一些配置，方便运维进行限制
实现思路：
1.前端将编译后的sourceMap文件统一放到一个目录下，运维对这个目录进行限制内网可访问，外网不可访问
2.更改编译后的js与sourceMappingURL的映射路径
代码逻辑/核心实现：
const webpack = require('webpack');
chainWebpack: config => {
if (process.env.VUE_APP_BUILD_ENV === 'test') { // 哪个环境需要对sourceMap进行分离上传，环境变量对应着写哪个
config.devtool(false); // 这个是把本地的productionSourceMap给关掉了，用下面的，不关的话，会造成，编译好的js有两个sourceMap的指向（需要注意的地方）
config
.plugin('SourceMapDevToolPlugin')
.use(webpack.SourceMapDevToolPlugin)
.tap(args => {
return [
{
filename: 'sourcemaps/[file].map', // 生成的sourceMap文件的文件名和包括这些文件的文件名
publicPath: 'http://example/xxx.com/', // 私有化的路径地址，填上你自己的地址，后面的‘/’不要忘记,如果不需要上传到远程地址上，这个字段可以不写，或者写个空字符串都行
moduleFilenameTemplate: 'source-map'
}
];
});
}
}
配置完build之后可以检查一下dist包里面有没有生成sourcemap的文件目录，以及检查一下编译过后的js下面的sourceMappingURL映射路径对不对
分离出来的sourceMap目录，让运维配置命令，部署的时候上传到对应的目录就行了
END
sourceMap分离，前端需要做的大概就这些，有不懂的小伙伴，可以评论区进行评论
