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

Integ 發布于2019-08-26 18:27 / 1366人閱讀

摘要：若不足之處，歡迎大家指出，共勉。如果覺得不錯，記得點贊，謝謝大家

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

//  然后使用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 后記

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

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

云服務器 GPU云服務器 python項目打包服務器打包項目為什么 android打包后 eclipse項目打包war

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110236.html

VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0