Vue項目打包後動態獲取自定義變量

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 國際許可協議 進行許可。

出處爲：https://github.com/xrkffgg/Tools