Vue sourceMap 代码混淆

开发环境

eval-source-map：精准的定位到错误行号，能跳转到源码。

生产环境

关闭source-map或nosources-source-map。

nosources-source-map: 防止源码泄露，只提供错误行号，无法定位源码。

vue.config.js

productionSourceMap: false：生产环境关闭source-map，代码会被混淆。该配置只有在生产环境有效，即build后有效。而且如果在configureWebpack配置了devtool，则该属性失效。

configureWebpack：根据不同环境变量配置混淆策略。建议开发环境配置为source-map，生产环境配置为nosources-source-map。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.devtool = "nosources-source-map";
    } else {
      // 为开发环境修改配置...
      // config.devtool = "eval-source-map";
      config.devtool = "source-map";
    }
  },
  css: {
    //查看CSS属于哪个css文件
    sourceMap: process.env.NODE_ENV !== 'production'
  }
})

eval-source-map

报错时会显示具体行号，且能跳转到源码。

ReferenceError: consoe is not defined
    at VueComponent.log (HomeView.vue?9584:98:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:1863:1)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?c320:2188:1)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?c320:6961:1)

source-map

报错时会显示具体行号，且能跳转到源码。

ReferenceError: consoe is not defined
    at VueComponent.log (HomeView.vue:98:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:1863:1)
    at HTMLButtonElement.invoker (vue.runtime.esm.js:2188:1)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js:6961:1)

productionSourceMap: false

代码被混淆，不显示行号，且不能跳转到源码。

vue.config.js中关闭productionSourceMap（默认值：true，开启了source-map），改为false表示启用代码混淆。

ReferenceError: consoe is not defined
    at o.log (app.3488a8c7.js:1:6648)
    at re (chunk-vendors.429dd6d8.js:11:11700)
    at HTMLButtonElement.n (chunk-vendors.429dd6d8.js:11:13520)
    at HTMLButtonElement.s._wrapper (chunk-vendors.429dd6d8.js:11:52177)

nosources-source-map

报错时会显示具体行号，但不能跳转到源码。

ReferenceError: consoe is not defined
    at o.log (HomeView.vue:98:1)
    at re (vue.runtime.esm.js:1863:26)
    at HTMLButtonElement.n (vue.runtime.esm.js:2188:14)
    at HTMLButtonElement.s._wrapper (vue.runtime.esm.js:6961:25)

点击HomeView.vue:98:1后跳转提示无法定位源码：

Could not load content for webpack://learn-vue/src/views/HomeView.vue (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

参考

https://cli.vuejs.org/zh/guide/webpack.html