Vue專案打包後可修改基礎介面地址設定的具體操作

2022-08-01 18:01:57

一、目的

最近在學習或工作中遇到，把 Vue 前端專案打包後，要求可以再次修改請求後端介面的基礎地址。平常開發中在 Vue 專案中使用 axios 時把請求後端介面的基礎地址寫在了 baseURL 裡。

這樣子打包後如果要改圖裡紅框處的地址，要麼去打包編譯後的檔案堆裡一個個搜尋（如果專案不小的話，這檔案堆可不少...），找到後直接改，要麼在原始碼裡改完後重新再打包部署，這兩種做法都顯得有些麻煩，且維護性也不好。

所以本文用一種較好的方案來解決以上問題，通過建立一個靜態資源裡的外部檔案，引入並實時獲取，實現在 Vue 專案打包後也能方便修改請求後端介面的基礎地址。

二、具體操作實現

1、前提：本文基於 vue-cli 3.x / 4.x 來實現的，相對應 vue-cli 2.x 來說，沒有那麼多複雜的設定操作（少了 build、config 資料夾和一些組態檔，多了 public 資料夾和 vue.config.js 檔案）。

2、public 資料夾就是存放那些不需要打包的檔案，可以直接存取（靜態資源），建立一個含有請求後端介面基礎地址的檔案 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，使其可全域性存取。同時建立 Vue 範例也放在請求後，為了防止頁面生成和請求的資料有出入。相關程式碼如下：

import axios from 'axios'
import { getUrlParams } from './utils/index'  // 工具函數：獲取 URL 上的引數
 
Vue.prototype.$axios = axios
 
function getServerConfig() {  // 定義
  axios.get('./config.json').then(res => {  // 請求上面描述的本地組態檔
    const urlDev = getUrlParams('env')  // 當 URL 上存在 env=prod 時請求地址為生產環境的
    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()  // 執行

這裡有個獲取 URL 上引數的工具函數，寫在 utils/index.js 裡，相關程式碼如下：

// 獲取 URL 上的引數
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 做點改造，目的是通過函數返回值能實時獲取到基礎介面地址的變更，這樣後續打包部署的專案不用重新啟動，直接重新整理頁面就可以。相關程式碼如下：

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 上帶不同引數，本地執行專案後檢視控制檯輸出。