vue-cli3.0 配置环境变量与模式

前言

---

去年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=http://juejin.im   （假设你项目的接口地址是这个）
    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)
复制代码

第一次写文章，有错漏的地方请多指教！