vue-cli项目中抽离管理所有接口地址的一个简单粗暴的方案
第一步：根据环境使用相应的host地址
一般来说，开发环境和生产环境所用的接口地址不会是同一个，比如大多数开发者都会在开发环境配置mock server而在生产环境使用真实api。更别说严谨的项目可能会有测试环境和预发环境。
方法1. 配置DefinePlugin
一个方法是在webpack.dev.conf.js和webpack.prod.conf.js中，直接把环境变量加在webpack.DefinePlugin里，以：
module.exports ={
// ...
plugins: [
new webpack.DefinePlugin({
//...
'API_HOST': '"http://xxxxx.com:8080"'
//这里注意，必须写成这种引号套引号的形式，或者写成JSON.stringify('string')这样。
})
],
// ...
}需要的时候直接用就行：
this.axios.get(API_HOST + '/api/what').then(function (res) {});webpack文档对DefinePlugin的解释：
方法2. 配置config
修改config/index.js，使各个环境配置里面的env文件名根据环境变量获取：
module.exports = {
build: {
env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env')
//...
}分别修改config目录下所有的环境配置文件，以prod.env.js为例：
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://xxxxx.com:8080"'//注意点与上面类似
}然后在任何地方就可以直接使用process.env.API_HOST来访问。
this.axios.get(process.env.API_HOST + '/api/what').then(function (res) {});我个人倾向于这种方法，虽然稍微麻烦一点，但是更干净合理，毕竟config.js就是给你做特殊设置的，能在config里配置的绝不进build里配置。
第二步：抽离所有接口地址放入同一个文件里管理
第一步已经满足了大部分开发者的需要，一般如果接口少且来源唯一，第二步没必要。
但如果你的项目使用了很多来源的接口，比如和第三方合作的，使用了开放接口的，使用了之前项目接口的，变数很多，接口命名风格也不统一，这不是一个洁癖前端想要的。
首先，在任何一个地方新建一个接口管理文件api_list.js（我习惯放进/config），写入你需要统一管理的：
const host = process.env.API_HOST//这里使用了第一步第二种方法
module.exports = {
API_ONE: host + '/oh/my/god', //description
API_TWO: host + '/ok/very/nice', //description
API_THREE: host + '/api/what', //description
}然后在入口文件main.js里先引入这个配置对象，然后直接简单粗暴地挂载到window对象上：
const API = require('../config/api_list')
window.API = API;很多人谈全局变量色变，我觉得只要命名清晰规范，又有命名空间，不会有任何问题。
使用的时候直接API.API_ONE这样子去用就行：
this.axios.get(API.API_ONE).then(function (res) {});简单粗暴，但又很实用。网上大多数方案都是写一个配置文件然后在用到的地方引入，这很符合模块化，但很麻烦。这个方案不同之处就是挂载了window对象。