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