vue项目之配置本地，测试，生产环境，配置axios.defaults.baseURL，解决跨域问题

最近在作一个vue项目，想经过不一样的命令调用不一样环境的api，防止来回手动修改api出错。网上看了好多写的都不全，而后本身突发奇想本身写一篇文章。

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

一、安装vue脚手架

npm install vue-cli -g

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

cd 目录路径

三、根据模板建立项目

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

四、后面就是根据本身的喜爱配置，最后一个是否保存本身的喜爱设置，我通常不保存，每次根据状况本身去配置

五、安装依赖

cd 项目目录
npm install

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

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

这是三种不一样环境的指令

3、在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完成

4、在config文件下创建test.env.js文件

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

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

增长test配置项，把build配置项的内容所有复制过来便可

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

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