最近在做一个vue项目，想通过不同的命令调用不同环境的api，防止来回手动修改api出错。网上看了好多写的都不全，然后自己突发奇想自己写一篇文章。

一、先简单说一下项目搭建

1、安装vue脚手架

npm install vue-cli -g

2、在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

3、根据模板创建项目

vue init webpack 项目名字<项目名字不能用中文>

4、后面就是根据自己的喜好配置，最后一个是否保存自己的喜好设置，我一般不保存，每次根据情况自己去配置

5、安装依赖

cd 项目目录
npm install

二、安装完毕之后打开project.json文件，配置test（测试环境指令）

npm run dev 调用本地环境
npm run test 调用阿里测试环境api
npm run build 调用 生产环境api

这是三种不同环境的指令

三、在build文件夹下建立test.js、webpack.test.conf.js文件

将build.js的内容全部复制到test.js文件里，test.js完成

将webpack.prod.conf.js的内容复制到webpack.test.conf.js文件里，
然后修改webpack.test.conf.js文件；
将const env = require(‘../config/prod.env’)；
修改为const env = require(‘../config/test.env’)；
webpack.test.conf.js完成

四、在config文件下建立test.env.js文件

将prod.env.js内容全部复制到test.env.js文件里，
分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT，

五、在config文件夹下配置index.js

增加test配置项，把build配置项的内容全部复制过来即可

六、在main.js文件里配置baseURL

这样多配置一种环境，就能实现开发、测试、生产环境随便调用，再也不用手动去修改了