vue-cli项目中抽离管理所有接口地址的一个简单粗暴的方案

第一步：根据环境使用相应的host地址

一般来说，开发环境和生产环境所用的接口地址不会是同一个，比如大多数开发者都会在开发环境配置mock server而在生产环境使用真实api。更别说严谨的项目可能会有测试环境和预发环境。

方法1. 配置DefinePlugin

一个方法是在 webpack.dev.conf.js 和 webpack.prod.conf.js 中，直接把环境变量加在webpack.DefinePlugin 里。

需要的时候直接用就行：

this.axios.get ( API_HOST + '/api/what ') . then( function (res) { } );

方法2. 配置config

修改config/index.js，使各个环境配置里面的env文件名根据环境变量获取：

分别修改config目录下所有的环境配置文件，以prod.env.js为例：

然后在任何地方就可以直接使用 process.env.API_HOST来访问。

我个人倾向于这种方法，虽然稍微麻烦一点，但是更干净合理，毕竟config.js就是给你做特殊设置的，能在config里配置的绝不进build里配置。

第二步：抽离所有接口地址放入同一个文件里管理

第一步已经满足了大部分开发者的需要，一般如果接口少且来源唯一，第二步没必要。

但如果你的项目使用了很多来源的接口，比如和第三方合作的，使用了开放接口的，使用了之前项目接口的，变数很多，接口命名风格也不统一，这不是一个洁癖前端想要的。

首先，在任何一个地方新建一个接口管理文件api_list.js（我习惯放进/config），写入你需要统一管理的：

然后在入口文件main.js里先引入这个配置对象，然后直接简单粗暴地挂载到window对象上：

很多人谈全局变量色变，我觉得只要命名清晰规范，又有命名空间，不会有任何问题。

使用的时候直接API.API_ONE这样子去用就行：

简单粗暴，但又很实用。网上大多数方案都是写一个配置文件然后在用到的地方引入，这很符合模块化，但很麻烦。这个方案不同之处就是挂载了window对象。