1 前言

1.1 業務場景

一般使用 Vue 專案連線後端請求，使用的 axios

import axios from 'axios'

export const CMSAPI = axios.create({
  baseURL: "http://localhost:8080",
  timeout: 30000,
});
複製程式碼

axios 中的 baseURL 一般是訪問地址

Vue 專案打包後，如果我們需要修改這個 baseURL 就需要修改程式碼重新 build

這樣就比較麻煩了

有沒有什麼辦法可以在Vue專案打包後再自定義變數呢？

2 實現原理

2.1 檔案

目前使用新版 @vue/cli 建立的專案目錄如上

我們發現這個圖示檔案 favicon.ico 在打包檔案中會單獨存在

類似，我們在這個資料夾中新建一個 index.js 檔案

2.2 程式碼

index.js 檔案中，我們直接定義一個變數

//  index.js
const apiURL = 'http://localhost:8080'
複製程式碼

//  index.html
<script type="text/javascript" src="<%= BASE_URL %>index.js"></script>
//  然後使用window物件
window.apiURL = apiURL
複製程式碼

// axios中引用
import axios from 'axios'

export const CMSAPI = axios.create({
  baseURL: window.apiURL,
  timeout: 30000,
});
複製程式碼

2.3 打包

npm run build 後，會發現根目錄中有我們定義的 index.js

這樣我們就可以直接修改 index.js 中變數的值就可以啦

3 後記

感謝支援。若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得 點贊，謝謝大家 ?

歡迎關注 我的： 【Github】 【掘金】 【簡書】

本文章採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。

出處為：github.com/xrkffgg/Too…