摘要：前端項目上線的時候不可避免的會考慮到不同的運行環(huán)境需要前端請求不同服務地址的問題方案一一般的情況下可以使用環(huán)境變量進行分環(huán)境打包開發(fā)環(huán)境繼續(xù)使用代理需要編譯的環(huán)境通過設置環(huán)境變量去控制打包過程最終生成適用于不同環(huán)境的前端資源有關環(huán)境

前端項目上線的時候 , 不可避免的會考慮到不同的運行環(huán)境需要前端請求不同服務地址的問題

方案一 :
一般的情況下 , 可以使用vue-cli-service環(huán)境變量進行分環(huán)境打包 ;
開發(fā)環(huán)境 , 繼續(xù)使用proxy代理 ;
需要編譯的環(huán)境 , 通過設置環(huán)境變量去控制打包過程 , 最終生成適用于不同環(huán)境的前端資源 ;
有關vue-cli-service環(huán)境變量的具體解釋在另一篇文章中有詳解 , 這里我們只關注實現(xiàn)
首先 , 我們需要添加各個環(huán)境的env配置文件 , 放在項目的根目錄下

我們以聯(lián)調環(huán)境為例 , 添加了一個.env.build_dev 文件
.env.build_dev

NODE_ENV="production" //表明這是需要編譯的環(huán)境(需要打包)
VUE_APP_CURRENTMODE="production" // 自定義的模式信息
VUE_APP_BASE_SERVER="http://****:8080" // 自定義的接口地址

在接口管理api.js文件中

import { fetchpost, fetchget, fetchput, fetchdelete } from "./config";
// 分環(huán)境打包
let baseUrl = "";
if (process.env.NODE_ENV == "development") {
  baseUrl = "/base"
} else if (process.env.NODE_ENV == "production") {
  baseUrl = process.env.VUE_APP_BASE_SERVER
} else {
  baseUrl = ""
}

export default {
  // 登錄
  login(params) {
    return fetchpost(
            `${baseUrl}/apis/v1/login`,
            params
        );
    },
  // 修改密碼
  setpsw(params) {
    return fetchput(
            `${baseUrl}/apis/v1/users/password`,
            params
        );
    },
    ...........略

接下來 , 我們需要在項目的package.json文件中為聯(lián)調環(huán)境添加一個編譯指令 "build_dev" , 并指定編譯模式
package.json

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build_dev": "vue-cli-service build --mode build_dev",
        "build_pre_release": "vue-cli-service build --mode build_pre_release",
        "build_test": "vue-cli-service build --mode build_test",
        "lint": "vue-cli-service lint"
    },

這樣 , 我們通過不同的指令去編譯對應環(huán)境的前端資源

方案二 :
另一種方式, 是將前端請求的服務地址抽離出來 , 放進配置文件里面 ,
開發(fā)環(huán)境 , 繼續(xù)使用proxy代理 ;
需要編譯的環(huán)境 , 可以直接修改編譯后的文件中的配置文件
這樣的好處如下:
1: 前端不需要重復進行打包編譯 ;
2: 自動化部署的時候可以使用腳本去替換前端資源中的配置文件 ;
3: 如果采用前端Docker化 , 可以在制作鏡像的過程中修改/替換配置文件 ;

首先 , 我們將config.json文件放置在public文件夾中(防止被webpack編譯)

在里面我們簡單存放一個服務地址字段
config.json

{
  "SERVER_URL": ""
}

接下來,需要保證項目開始加載前 , 我們已經獲取到這個配置文件了 , 所以在main.js 里面 , 我們需要先獲取這個配置文件 , 再實例化vue

mian.js

import axios from "axios"
// vue實例
function createdVue () {
  return new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
if (process.env.NODE_ENV == "development") {
    // 放在public文件夾下的靜態(tài)文件需要通過絕對路徑去獲取
    axios.get("/config.json").then(res=>{
      // 開發(fā)環(huán)境通過proxy代理的形式 , 不需要獲取配置地址
      Vue.prototype.SERVER_URL = ""
      createdVue()
    })
} else if (process.env.NODE_ENV == "production") {
    // 放在public文件夾下的靜態(tài)文件需要通過絕對路徑去獲取
    axios.get("/config.json").then(res=>{
      // 將獲取到的配置文件作為全局變量保存
      Vue.prototype.SERVER_URL = res.SERVER_URL
      // 成功獲取到配置后再去創(chuàng)建vue實例
      createdVue()
    })
  } 

一般項目中 , 我們都會對axios進行統(tǒng)一封裝 , 為axios創(chuàng)建一個config.js 文件 , 里面對axios請求頭 , baseUrl , 請求攔截 , 各種請求方式進行配置
在這里我們?yōu)槊總€請求添加baseUrl
config.js

import axios from "axios"
import Vue from "vue";
import qs from "qs"
import Router from "@/router.js"
import {Message} from "element-ui"
// axios.defaults.timeout = 10000     // 響應時間
// 獲取全局變量中的服務地址
function getBaseUrl () {
  return Vue.prototype.SERVER_URL
}
// 配置請求頭
axios.defaults.headers.post["Content-Type"] = "application/json"

// 添加請求攔截器
axios.interceptors.request.use((config) => {
  // 為每次請求添加baseUrl  
  config.baseURL = getBaseUrl()
  if (sessionStorage.token) {
    config.headers["Authorization"] = sessionStorage.token
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 添加響應攔截器
axios.interceptors.response.use((res) => {
  // 如果錯誤碼!==0;拋出異常
  if (res.data.code && res.data.code !== 0) {
    switch (res.data.code) {
      case 1001:
        // 無權限
        Router.replace("/login")
        break;
      case 1003:
        // 訪問身份不合法
        Router.replace("/login")
        break;
      default:
        break;
    }
    let message = res.data.msg || "出錯了"
    return Promise.reject({message: message, err: res})
  } else {
    return Promise.resolve(res.data)
  }
}, (error) => {
  let message = "服務器錯誤"
  return Promise.reject({message: message, err: error})
})

// 返回一個Promise(發(fā)送post請求)
export function fetchpost (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}
// 返回一個Promise(發(fā)送get請求)
export function fetchget (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: params}).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}

// 返回一個Promise(發(fā)送put請求)
export function fetchput (url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}
// 返回一個Promise(發(fā)送delete請求)
export function fetchdelete (url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url, params).then(response => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  })
}