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的解释：

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.

方法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对象。