记录一次Vue项目打包卡在dist最后一步的问题

前言

你好，我是喵喵侠。在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，我猜测可能是因为这个环境打包是没有压缩，会导致打包非常慢卡住不动了。但具体的细节原理还不是很清楚，配置书写正确后，打包就没有问题了，插件也不影响使用。

总结

有时候遇到一些奇怪的问题，不太好描述，也没法从搜索引擎找到合适的答案。这时候需要从多个角度进行思考尝试，逐一排查，最终找到问题的解决办法。