前言
去年8月份到公司做了一个新项目，当时vue-cli3.0正式版才出来，也就顺便就用vue-cli3.0脚手架来搭起项目。也就开启了爬坑之旅（对于我这个菜鸟前端来说）。
由于vue-cli3.0移除了配置文件目录： config和build文件夹，那么移除了配置文件目录后
1.如何自定义配置环境变量和模式呢?
2.如何配置反向代理呢？
3.如何配置css预处理器呢？
这些问题接踵而来！当时3.0版本刚出来也没有相关文章来查询，只好阅读3.0版本官方指南。问题2和3都顺利的解决，就剩问题1，可能思想还停留在2.0原因，对于3.0文档配置环境变量与模式的指南我一时间也没读懂（菜鸟嘛，大家懂得，哈哈哈）。项目也挺急的遂暂时放弃，用了一个很low的办法暂时解决了这个问题（手动滑稽）。
为什么需要配置环境变量和模式呢？
在一个产品的前端开发过程中，一般来说会经历本地开发、测试环境、预上线环境，然后才到打包正式版本。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。
环境变量
3.0版本总共提供了4种方式来制定环境变量，分别是以下4钟。
在你的项目根目录中创建下列文件来指定环境变量：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入 例： .env.development
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 例： .env.development.local
如下图：
在cli3.0创建后.env那三个文件和vue.confige.js都是要自己创建的。
那文件里面怎么写呢？
一个环境文件只包含环境变量的“键=值”对：
比如：
VUE_APP_HOST=https://juejin.cn （假设你项目的接口地址是这个）
VUE_APP_webSocketUrl=ws://0.0.0.0:17112 （假设你项目的webSocket地址是这个）
outputDir=test_dist
（备注： 如果你想在项目里面使用到这个环境变量，而不仅仅只在配置里面使用 请使用 VUE_APP_ 这个前缀来定义环境变量）
最后怎么使用呢？一张图展示,如下：
我们创建的文件名.env.test 对应 --mode test，打测试环境包的时候输入 npm run test-build ，
我们创建的文件名.env.production 对应 --mode production，打正式的生产环境包就输入 npm run build;这就ok啦！
另外，为了区分正式生产环境包和测试环境包，避免搞混。可以在环境文件里面加上outputDir=test_dist，然后在vue.config.js配置文件里面：
outputDir默认值是dist，所以在正式生产环境文件不用写 outputDir=test_dist
打包后的项目目录就是这样的。如下图：
在项目里面使用环境变量
console.log(process.env.VUE_APP_HOST)
第一次写文章，有错漏的地方请多指教！
