如何在Vue.js/Nuxt.js项目中调试引入的自定义库避免代码被压缩？

场景1：Vite构建的Vue3项目 #

Vite默认在生产环境会压缩代码，要排除指定库的话，修改vite.config.js/vite.config.ts里的build配置：

• 如果使用terser作为压缩工具，配置如下：

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      // 替换为你自己开发的库的包名，支持正则匹配
      exclude: /your-custom-lib-name/
    }
  }
})

• 如果使用默认的esbuild压缩，配置如下：

export default defineConfig({
  optimizeDeps: {
    // 开发环境排除该库的预构建压缩
    exclude: ['your-custom-lib-name']
  },
  build: {
    esbuild: {
      exclude: /your-custom-lib-name/
    }
  }
})

场景2：Webpack构建的Vue2/VueCLI项目 #

修改vue.config.js配置：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            exclude: /node_modules\/your-custom-lib-name/
          }
        })
      ]
    }
  }
}

注意如果项目未预装TerserPlugin需要先安装对应依赖，开发环境下默认不会压缩代码，只有生产构建会触发压缩逻辑。

场景1：Nuxt3（默认使用Vite构建） #

修改nuxt.config.ts：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      exclude: ['your-custom-lib-name']
    },
    build: {
      esbuild: {
        exclude: /your-custom-lib-name/
      }
    }
  }
})

如果需要完全关闭所有第三方库的压缩，直接把build.minify设为false即可，该操作会导致打包体积大幅上涨，仅推荐临时调试使用。

场景2：Nuxt2（默认使用Webpack构建） #

修改nuxt.config.js：

module.exports = {
  build: {
    terser: {
      exclude: /your-custom-lib-name/
    }
  }
}

额外优化建议：你自己开发库的时候，可以在库的打包配置里开启sourcemap输出，调试时把sourcemap部署到对应环境，就算上层项目开启了全量压缩，也可以直接在Chrome调试工具里映射到原始未压缩的代码，不需要修改上层项目的构建配置，适配性更强。

内容的提问来源于stack exchange，提问作者Nick Zozor