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對象。