打包 Vue 项目，这玩意儿实际上挺玄学的，就像做饭一样，食材摆好了一手，火候拿捏不稳就糊了。别总拿那些教科书式的“起初、其次、最终”来忽悠自己，那玩意儿 written in stone，哪位都能背出来。 打开命令行，点进项目目录，最直观的指望就是 `npm run build` 这行命令。Vue CLI 用的都是这种粗暴的大刀阔斧，直接生成 dist 文件夹，里面全是打包好的文件，啥都没留。对新手来说，这行命令看着就不赖，但也忒少了。
要是你真想在打包前把设计稿里的几张图要么几个组件试跑一下，得先加载起来。
那就要用到 Vue CLI 的 `serve` 了，要么用造环境启动器 `devServer`。启动这玩意儿，浏览器会先打开端口，让你看一眼效果，这时候 UI 看起来真挺爽，蓝色的框架搭起来，卡片飘起来，连那个加载动画都带着节奏。 不过，造环境才是真剑。别只盯着 `npm run build` 看，出于那生成的文件，文件夹结构看似清楚，实际上是个庞大的黑盒。你在这个黑盒里折腾了半小时，改了一个组件，结局打包后的文件结构里，原来 `layouts` 目录下的文件，目前可能混进了 `assets` 目录的阴影里，害得你赶明儿登不上去。
故此，在 `build` 之前，你得先确保你的 Vue 版本、依赖包都干净利落。
有时候项目里根本没安装某个包，要么安装错了版本，这时候别急着跑，先跑个 `npm ls`，看看依赖树，把乱七八糟的东西清理干净利落，再动打包。 打包本身，对一般/平平用户来说，就是个单纯的复制粘贴过程。只是你要想生成一个真正的“造环境”版本，还得把 `dev` 里的配置给关掉，把那些调试用的 `console.log` 删干净利落，不然打包出来的文件，里面全是垃圾代码，用户看着就是体无完肤。
这时候，`NODE_ENV` 这个环境变量就派上用场了，设为 `'production'`，告诉打包工具，目前是要把应用扔进地铁了，别带那个报错满屏幕的提示框。 这时候，最关键的还是资源处理。HTML 文件，特别是那些引入了大量第三方库的，打包后的体积能大到 50MB 就连更大。
这时候得管它，看看那些 `` 里的 CSS 和 `