如何在Vue中抽離接口配置文件
Vue中抽離接口配置文件的問題及解決方法
問題背景
在通常開發(fā)中，我們經(jīng)常把接口配置文件寫在src目錄里，
雖然有了一些方便，但也引發(fā)出一個(gè)新的問題，就是每次接都要重新編譯。
解決方法
如果是cli2在static文件夾下創(chuàng)建XXX.js文件
如果是cli3在public文件夾下創(chuàng)建XXX.js文件
這兩個(gè)文件夾下的內(nèi)容將會原封不動地打包都dist里
在XXX.js下代碼，定義全局變量，這樣我們便能在任何地方使用
window.$4002API = {
URL:'http://baidu.com',
getAll:URL+'/aa/aa',//也能定義接口，到時(shí)在axios中調(diào)用
}
在main.js中引入XXX.js
import '../static/config/index'
使用
console.log($4002API.URL)//'http://baidu.com' console.log($4002API.getAll)//'http://baidu.com/aa/aa'
當(dāng)打包的時(shí)候，在main.js中注釋掉
// import '../static/config/index'
并在index.html文件中引入XXX.js
<script src="./static/config/index.js"></script>
總結(jié)
以上所述是小編給大家介紹的如何在Vue中抽離接口配置文件,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解（部分校驗(yàn),全部校驗(yàn)）
validate（)可以指定校驗(yàn)范圍內(nèi)，或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍（部分校驗(yàn)，全部校驗(yàn)） ,需要的朋友可以參考下2018-10-10
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要給大家介紹的是基于Vue2的移動端環(huán)境搭建，移動端大家更多想到的是響應(yīng)布局，我們根據(jù)不同大小的屏幕進(jìn)行適配，當(dāng)然少不了我們的重頭戲rem，移動端相比pc端就沒什么特別的了。我會一步一步帶領(lǐng)大家進(jìn)入Vue2的世界，感興趣的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作，具有很好的參考價(jià)值，希望對大家有所 幫助。一起跟隨小編過來看看吧2020-08-08
使用Vue與WebSocket創(chuàng)建實(shí)時(shí)通知系統(tǒng)
在現(xiàn)代應(yīng)用開發(fā)中,實(shí)時(shí)性已成為用戶體驗(yàn)的一個(gè)重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實(shí)時(shí)通知系統(tǒng),在本文中,我們將通過一個(gè)簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個(gè)實(shí)時(shí)通知系統(tǒng)2024-11-11
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
avue-crud多級復(fù)雜的動態(tài)表頭的實(shí)現(xiàn)示例
Avue.js?是基于現(xiàn)有的element-ui庫進(jìn)行的二次封裝，本文主要介紹了avue-crud多級復(fù)雜的動態(tài)表頭，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01