Vue sourceMap 代码混淆

Vue About 2,383 words

开发环境

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

生产环境

关闭source-mapnosources-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

Views: 2,044 · Posted: 2023-01-11

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh