Vue項目打包后可修改基礎接口地址配置的具體操作

更新時間：2022年08月01日 14:53:43 作者：無解的菜鳥暉

vue項目打包過后發(fā)現(xiàn)地址錯了或者發(fā)布到別的服務器發(fā)現(xiàn)請求的地址不對,每次都要去重新打包,太浪費時間,下面這篇文章主要給大家介紹了關于Vue項目打包后可修改基礎接口地址配置的具體操作,需要的朋友可以參考下

一、目的

最近在學習或工作中遇到，把 Vue 前端項目打包后，要求可以再次修改請求后端接口的基礎地址。平常開發(fā)中在 Vue 項目中使用 axios 時把請求后端接口的基礎地址寫在了 baseURL 里。

這樣子打包后如果要改圖里紅框處的地址，要么去打包編譯后的文件堆里一個個搜索（如果項目不小的話，這文件堆可不少...），找到后直接改，要么在源碼里改完后重新再打包部署，這兩種做法都顯得有些麻煩，且維護性也不好。

所以本文用一種較好的方案來解決以上問題，通過創(chuàng)建一個靜態(tài)資源里的外部文件，引入并實時獲取，實現(xiàn)在 Vue 項目打包后也能方便修改請求后端接口的基礎地址。

二、具體操作實現(xiàn)

1、前提：本文基于 vue-cli 3.x / 4.x 來實現(xiàn)的，相對應 vue-cli 2.x 來說，沒有那么多復雜的配置操作（少了 build、config 文件夾和一些配置文件，多了 public 文件夾和 vue.config.js 文件）。

2、public 文件夾就是存放那些不需要打包的文件，可以直接訪問（靜態(tài)資源），創(chuàng)建一個含有請求后端接口基礎地址的文件 config.json 放在此目錄下（ npm run build 時該文件不會受影響），如下圖：

{
  "BASE_URL_DEV": "https://www.dev-api.com",
  "BASE_URL_PROD": "https://www.prod-api.com"
}

3、接下來在 main.js 文件中請求定義的配置文件，并寫入 Vue.prototype，使其可全局訪問。同時創(chuàng)建 Vue 實例也放在請求后，為了防止頁面生成和請求的數(shù)據(jù)有出入。相關代碼如下：

import axios from 'axios'
import { getUrlParams } from './utils/index'  // 工具函數(shù)：獲取 URL 上的參數(shù)
 
Vue.prototype.$axios = axios
 
function getServerConfig() {  // 定義
  axios.get('./config.json').then(res => {  // 請求上面描述的本地配置文件
    const urlDev = getUrlParams('env')  // 當 URL 上存在 env=prod 時請求地址為生產(chǎn)環(huán)境的
    Vue.prototype.BASE_URL = urlDev == 'prod' ? res.data.BASE_URL_PROD : res.data.BASE_URL_DEV 
    console.log('接口配置的基礎地址', Vue.prototype.BASE_URL)
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  })
}
 
getServerConfig()  // 執(zhí)行

這里有個獲取 URL 上參數(shù)的工具函數(shù)，寫在 utils/index.js 里，相關代碼如下：

// 獲取 URL 上的參數(shù)
export function getUrlParams(name) {
  if (name == null || name === 'undefined') { 
    return null
  }
  var searchStr = decodeURIComponent(window.location.href).replace('?', '&')
  var infoIndex = searchStr.indexOf(name + '=')
  if (infoIndex === -1) { 
    return null
  }
  var searchInfo = searchStr.substring(infoIndex + name.length + 1)
  var tagIndex = searchInfo.indexOf('&')
  if (tagIndex !== -1) { 
    searchInfo = searchInfo.substring(0, tagIndex)
  }
  return searchInfo
}

4、然后對 Vue 項目里封裝的 axios 文件 request.js 做點改造，目的是通過函數(shù)返回值能實時獲取到基礎接口地址的變更，這樣后續(xù)打包部署的項目不用重新啟動，直接刷新頁面就可以。相關代碼如下：

import Vue from 'vue'
import axios from 'axios'
 
function getBaseUrl(){
  return Vue.prototype.BASE_URL
}
 
const service = axios.create({
  baseURL: getBaseUrl(),  // 打包后可配置的方式
  withCredentials: true,
  timeout: 50000 // request timeout
})
 
//  ... 其余剩下部分與本文無關，就沒有寫出了 ...

5、最后進行驗證，在 URL 上帶不同參數(shù)，本地運行項目后查看控制臺輸出。