vue利用webpack搭建开发，uat,生产三套环境

webpack本身有dev和prodcution两套环境，我们的项目还有uat环境，只有两套环境并无法满足项目开发的需要，因为我参考webpack搭建dev环境的方式搭建了uat环境。

首先，找到项目的package.json,找到scripts,加上uat指令的定义，

很容易理解，当我们执行npm run dev时候执行node中build目录的dev-server.js，所以我们定义了uat指令执行uat-server.js。

uat-server.js

webpack.uat.conf.js

uat.env.js

找到config下方的index.js

在dev下方增加uat的配置，配置如下：

这样，搭建了dev,uat和production三套环境，我们在dev.env.js增加API_ROOT：

在prod.env.js增加API_ROOT:

在配置api接口的文件中，将baseURL设置成：

这里以axios的设置为例，项目根据实际情况调整。

如此，当我们运行

指向的域名服务器是

当我们运行

指向的域名服务器是

这是前面配置的自定义指令，可根据项目实际情况定义自己的指令

当我们运行

指向的域名服务器是

打包项目的时候，打包的是根据服务器获取到相应的接口，我们就不用调来调去，也不容易出错，有问题欢迎留言讨论。

根据vue cli 官网( https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F )的解释，我们可以直接在src同级目录下创建.env.development和.env.production，这个两个文件

.env.production 这个文件配置的是生产环境的变量，放置线上访问的路径

.env.development 这个文件配置的是开发环境的变量，可以让我们在本地访问线上的路径

在components文件夹下创建login.vue

---