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

前端項(xiàng)目上線的時(shí)候 , 不可避免的會(huì)考慮到不同的運(yùn)行環(huán)境需要前端請(qǐng)求不同服務(wù)地址的問題

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

我們以聯(lián)調(diào)環(huán)境為例 , 添加了一個(gè).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
        );
    },
    ...........略

接下來 , 我們需要在項(xiàng)目的package.json文件中為聯(lián)調(diào)環(huán)境添加一個(gè)編譯指令 "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"
    },

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

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

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

在里面我們簡(jiǎn)單存放一個(gè)服務(wù)地址字段
config.json

{
  "SERVER_URL": ""
}

接下來,需要保證項(xiàng)目開始加載前 , 我們已經(jīng)獲取到這個(gè)配置文件了 , 所以在main.js 里面 , 我們需要先獲取這個(gè)配置文件 , 再實(shí)例化vue

mian.js

import axios from "axios"
// vue實(shí)例
function createdVue () {
  return new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
if (process.env.NODE_ENV == "development") {
    // 放在public文件夾下的靜態(tài)文件需要通過絕對(duì)路徑去獲取
    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)文件需要通過絕對(duì)路徑去獲取
    axios.get("/config.json").then(res=>{
      // 將獲取到的配置文件作為全局變量保存
      Vue.prototype.SERVER_URL = res.SERVER_URL
      // 成功獲取到配置后再去創(chuàng)建vue實(shí)例
      createdVue()
    })
  } 

一般項(xiàng)目中 , 我們都會(huì)對(duì)axios進(jìn)行統(tǒng)一封裝 , 為axios創(chuàng)建一個(gè)config.js 文件 , 里面對(duì)axios請(qǐng)求頭 , baseUrl , 請(qǐng)求攔截 , 各種請(qǐng)求方式進(jìn)行配置
在這里我們?yōu)槊總€(gè)請(qǐng)求添加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     // 響應(yīng)時(shí)間
// 獲取全局變量中的服務(wù)地址
function getBaseUrl () {
  return Vue.prototype.SERVER_URL
}
// 配置請(qǐng)求頭
axios.defaults.headers.post["Content-Type"] = "application/json"

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

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

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

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