頻道欄目
首頁 > 程序開發 > web前端 > HTML/CSS > 正文
Vue項目打包后動態獲取自定義變量-前端技術-SegmentFault思否
2019-05-11 22:05:10           
收藏   我要投稿

1 前言

1.1 業務場景

一般使用 Vue 項目連接后端請求,使用的 axios

import axios from 'axios'

export const CMSAPI = axios.create({
  baseURL: "https://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 = 'https://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

點擊復制鏈接 與好友分享!回本站首頁
相關TAG標簽
上一篇:用JavaScript實現插入排序-瘋狂的技術宅-SegmentFault思否
下一篇:ES6專題—class與面向對象編程-體驗javascript之美-SegmentFault思否
相關文章
圖文推薦
點擊排行

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

加拿大28火车判定方法