Vue CLI Source Map部署最佳实践

前言

如果直接在服务器部署Source Map文件，会有一个问题是暴露源码，这是绝对不可容忍的，但是如果不上传Source Map文件就会有调试困难的问题，我们无法第一时间看到出错位置，只能是大致猜测，或者dev工程，但是有时候无法复现生产服务器的bug。

解决办法

我们修改js文件的sourceMappingURL，指向127.0.0.1或者内网的服务器，就可以解决这个问题。

实操

vue.config.js

加入：

const { SourceMapDevToolPlugin } = require("webpack");

......

chainWebpack(config) {
    config.devtool(false).end();
    config
      .plugin("SourceMapDevToolPlugin")
      .use(SourceMapDevToolPlugin)
      .tap((args) => {
        return [
          {
            filename: "[file].map",
            publicPath: "http://127.0.0.1:5500/",
          },
        ];
      });
  },

其中http://127.0.0.1:5500/可以自定义。

build项目之后，将.js.map文件备份到专门目录下

不管你是命令行备份还是复制粘贴备份，总之备份好，按照build版本分目录储存。其实作为一个非混子前端，你应该每次备份全量的dist文件。

本地安装一个Server软件

随便什么Server软件，将http://127.0.0.1:5500/指向正确的备份目录即可。

生产部署不要部署.js.map文件

这里理所当然的，你应该屏蔽.js.map的部署，这很重要。