前言
你好，我是喵喵侠。在Vue项目开发中，项目开发完成后，打包是一个常见的操作。今天我遇到了一个奇怪的问题，那就是在一个Vue2项目中，执行npm run build打包，等待数秒后，可以看到完整的文件被打包，但是卡在了最后一步dist目录这里。不光我是这里，同事那边试过了也不行，以前从来没有遇到过的。于是我针对这个诡异的问题，做出了一些的尝试。
一些尝试
删除node_modules后重新安装依赖
这个方法很简单，首先使用rm -rf node_modules来删除项目所有依赖，然后删除pnpm-lock.yaml，然后pnpm install以下，安装依赖后，再执行pnpm run build:test，打包测试环境。
注意：我这里是pnpm的lock，如果你用的是npm，对应的是package-lock.json；如果你用的是yarn1.x，那么对应的是yarn.lock。
这种方法试过了，还是卡在最后一步不动了，如下图所示。
npm run build打包生成环境
既然npm run build:test不行，那就试试npm run build吧。经过了测试后，发现打包生成环境是可以的，就是打包测试环境不行。我想不应该啊，环境不同只是后台请求的URL地址不一样，为什么test不是呢？此时我还没有发现问题的关键，但解决办法已经很接近了，于是有了后面的尝试。
回退vue.config.js配置文件
这个文件里面写了很多webpack相关的打包配置，如果是这个配置文件出了问题，那么打包的问题很可能就是这个导致的，因为一开始打包都是正常的。我回退到了最初始的版本，重新执行pnpm run build:test，发现居然可以了！
找到原因
我仔细对比了下前后vue.config.js的区别，发现是我引入的一个插件导致的，插件的名称叫做code-inspector-plugin，这是一款很好用的代码定位插件，可以帮助你快速从页面元素，定位到项目代码的指定为止。只要我引入了这个插件，打包就会一直卡住。
我去看了下官方文档，发现插件自动处理了环境的判断，不需要用户手动处理，但实际表现确实还是插件有影响。
既然是环境的问题，我就打开.env.test文件，仔细看了下配置，发现了问题所在！
好家伙！这里NODE_ENV写的不是production，而是test！难怪打包一直卡主不动。正常的npm run build可以，是因为环境写的是production。
项目最开始的时候，这个环境写的就是test，我猜测可能是因为这个环境打包是没有压缩，会导致打包非常慢卡住不动了。但具体的细节原理还不是很清楚，配置书写正确后，打包就没有问题了，插件也不影响使用。
总结
有时候遇到一些奇怪的问题，不太好描述，也没法从搜索引擎找到合适的答案。这时候需要从多个角度进行思考尝试，逐一排查，最终找到问题的解决办法。
