复制代码
sourcemap
生产环境下所有的报错的代码行数都在第一行了,为什么呢?
通常在该环境下的代码是经过webpack打包后压缩混淆的代码,否则源代码泄漏易造成安全问题,在生产环境下,我们的代码被压缩成了一行。而保留了sourcemap文件就可以利用webpack打包后的生成的一份.map的脚本文件就可以让浏览器对错误位置进行追踪了,但这种做法并不可取,更为推荐的是在服务端使用Node.js对接收到的日志信息时使用source-map解析,以避免源代码的泄露造成风险
image.png
vue.config.js
配置里通过属性productionSourceMap: true
可以控制webpack是否生成map文件
webpack自定义插件实现sourcemap自动上传
为了我们每一次构建服务端能拿到最新的map文件,我们编写一个插件让webpack在打包完成后触发一个钩子实现文件上传,在vue.config.js
中进行配置
调整 webpack 配置
//vue.config.js
let SourceMapUploader = require(“./source-map-upload”);
module.exports = {
configureWebpack: {
resolve: {
alias: {
“@”: resolve(“src”),
},
},
plugins: [
new SourceMapUploader({url: “http://localhost:3000/upload”})
],
}
// chainWebpack: (config) => {},
}
复制代码
//source-map-upload.js
const fs = require(“fs”);
const http = require(“http”);
const path = require(“path”);
class SourceMapUploader {
constructor(options) {
this.options = options;
}
/**
* 用到了hooks,done表示在打包完成之后
* status.compilation.outputOptions就是打包的dist文件
*/
apply(compiler) {
if (process.env.NODE_ENV == “production”) {
compiler.hooks.done.tap(“sourcemap-uploader”, async (status) => {
// console.log(status.compilation.outputOptions.path);
// 读取目录下的map后缀的文件
let dir = path.join(status.compilation.outputOptions.path, “/js/”);
let chunks = fs.readdirSync(dir);
let map_file = chunks.filter((item) => {
return item.match(/.js.map$/) !== null;
});
// 上传sourcemap
while (map_file.length > 0) {
let file = map_file.shift();
await this.upload(this.options.url, path.join(dir, file));
}
});
}
}
//调用upload接口,上传文件
upload(url, file) {
return new Promise((resolve) => {
let req = http.request(${url}?name=${path.basename(file)}
, {
method: “POST”,
headers: {
“Content-Type”: “application/octet-stream”,
Connection: “keep-alive”,
},
});
let