vue-cli3多环境打包配置

背景：框架vue2+工具vue-cli3（其实我本地已经到vue-cli5，不过不影响，项目目录与3保持一致，但是打包貌似有一点区别，下文会讲），项目需要在生产环境打包不同的二级目录。

1、新增env文件

新增env文件时需要指定NODE_ENV，不然默认就是development，VUE_APP_NODE_ENV是自定义的，最后打包判读也是根据这个来的。

 2、根目录下新增自定义文件app.config.js

这个是根据VUE_APP_NODE_ENV判断打包资源输出目录、公共资源和路由访问目录，其中outputDir就是平时打包默认的dist，这里做了自定义，deployDir就是公共资源和路由访问增加一个二级目录。

 3、vue.config.js和router修改

 

 4、修改package.json

 5、打包结果

 

 基于此，打包已经完成。但是在打包的过程中，出现的问题，经过搜索和官网文档查阅，得出结论。

问题：印象中vue-cli3工具env文件名和NODE_ENV是相同的，但是如果是自定义的env文件，打包之后css文件会丢失，并且js不会进行压缩。

解决：查阅官方文档：模式和环境变量 | Vue CLI

 

 

个人理解是：工具对于NODE_ENV内置三个值，我们不应该修改它，如果需要覆盖打包模式，可以通过增加以VUE_APP_为前缀自定义变量来做判断。

最后：比起vue-cli2打包多环境，3确实方便了许多。因为之前一直是2打包，对于3只是了解，并没有实操，但是今天打包发现和印象中还是有出入，不知道是不是因为本地是版本5，webpack做了内置修改。总而言之，目前这样的方式可以解决问题，并且比较便捷。