vue项目总结之配置本地，测试，生产环境api

最近在做vue项目，想实现通过不同的命令，调用不同环境的api，防止来回切换不同的api出错。

例如: npm run dev 调用本地环境

npm run test 调用阿里测试环境api

npm run build 调用 生产环境api

先简单说一下创建vue项目的流程:

1. npm install -g vue-cli 全局安装脚手架（只安装一次）

2. vue init webpack 项目名称（创建项目）

3. npm install (安装依赖）

4. npm run dev （本地启动项目）

项目是用vue-cli脚手架生成的，生成后项目中就有下面这两个文件

在build文件下新建webpack.test.conf.js，将webpack.prod.conf.js内容复制过来。

然后修改webpack.test.conf.js文件

将const env = require('../config/prod.env')；

修改为const env = require('../config/test.env')；

在config文件下新建test.env.js，将prod.env.js内容复制过来；

分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT，

dev.env.js

test.env.js

prod.env.js

project.json 中修改

上面中api只是示例，大家根据自己实际api进行配置。

配置API接口地址就可以直接用 process.env.API_ROOT，不用来回切换了。