Vue productionSourceMap 详解

Vue 在生产环境下默认会生成 sourceMap 文件， productionSourceMap 设置为 false 可以禁用它。但是在一些情况下，比如开发小程序等，需要禁用 sourceMap 以减小文件体积。这篇文章将对 Vue productionSourceMap 从多个方面进行详细阐述。

一、productionSourceMap 的作用

productionSourceMap 在构建时生成完整的 SourceMap 文件，默认情况下开启。生产环境中启用 productionSourceMap 有助于开发者调试代码，可以在浏览器的调试工具中查看到源文件中错误的代码位置，而不是编译后的代码位置。这对于定位线上问题十分有帮助。

然而，开启 productionSourceMap 会使得构建后的代码包含源代码映射关系，导致构建后的代码文件体积增大。体积增加会影响页面加载速度，而且源代码也存在泄漏的风险，因此有些开发者会选择在生产环境中禁用 productionSourceMap。

二、禁用 productionSourceMap 静态资源定位

禁用 productionSourceMap 后，会对静态资源的定位产生影响，需要手动配置 webpack.

要想引入其它静态资源（比如图片、字体等），需要将资源放到静态资源目录（static）下，然后使用相对路径引用即可。或者使用 require 和 import 引入的静态资源，也可以通过相对路径来引入。

const img = require('@/assets/img/logo.png')
import font from '@/assets/font/iconfont.css'

三、禁用 sourceMap 属性

Vue 官方提供了关闭 sourceMap 功能的方法，只需在 module.exports 内的 configureWebpack 选项中添加以下代码：

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 禁用 sourceMap
      config.devtool = false
    }
  }
}

这样可以禁用 sourceMap，减小代码体积。同时，在使用这种方式的过程中，我们需要了解，禁用 sourceMap 会导致构建后的文件无法排查错误，如果出现错误，将需要通过手动定位错误代码位置来解决。

四、使用环境变量控制

在 Vue 项目中，可以运用环境变量来控制生产环境下是否启用 productionSourceMap 属性。还是在 configureWebpack 中，可以使用 process.env 对象来获取环境变量，示例代码如下：

module.exports = {
  configureWebpack: config => {
    if (process.env.VUE_APP_MODE === 'development') {
      // 开发环境
      config.devtool = 'source-map'
    } else {
      // 生产环境
      config.devtool = false
    }
  }
}

在定义环境变量时，在 package.json 中 scripts 对象的命令行参数中添加环境变量，示例如下：

"scripts": {
  "build:test": "cross-env VUE_APP_MODE=qa vue-cli-service build"
}

五、手动排查错误位置

禁用 sourceMap 会导致构建后的文件无法排查错误。为了确保出现问题时，我们可以及时排查错误，我们可以手动定位错误代码位置。可以有两种方法：

方法一、在浏览器中使用 sourcemap-webpack-plugin 插件构建后的版本，这个插件可以为我们的构建版本提供 sourceMap 文件的映射服务。 方法二、在代码上添加一些通用的排查错误方法，例如在基础的 Vue 组件模块中，代码可以如下所示：

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  name: 'componentName',
  data() {
    return {
      ...
    }
  },
  methods: {
    ...
  },
  created() {
    console.log('当前组件：', this.$options.name, '，路径：', this.$options.__file)
  }
}
</script>

以上是本篇文章对于 Vue productionSourceMap 的详细阐述，通过阅读本文可以了解 productionSourceMap 的作用、禁用/启用方法以及手动排查错误位置的方法。如果您有更好的建议或意见，欢迎在评论区留言。