隨著互聯(lián)網(wǎng)技術的發(fā)展，現(xiàn)在很多互聯(lián)網(wǎng)公司分工越來越明確了。后端開發(fā)人員只負責后端開發(fā)及接口的提供，前端人員負責按照設計圖出頁面及套頁面，這個時候就出現(xiàn)了一種新的開發(fā)模式。即前后端分離模式。前端框架更新及普及更加推動了前后端分離開發(fā)。這種模式縮短了項目開發(fā)周期。但是，有時候會會出現(xiàn)比較尷尬的情況。比如再使用VUE寫項目的時候，就會遇到。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都網(wǎng)站制作、網(wǎng)站設計、外貿網(wǎng)站建設的網(wǎng)絡公司。作為專業(yè)網(wǎng)站建設公司,成都創(chuàng)新互聯(lián)公司依托的技術實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設、營銷型網(wǎng)站及網(wǎng)站設計開發(fā)服務！

在寫vue項目的時候，后臺沒有及時提供數(shù)據(jù)，我們前臺會在本地模擬一些數(shù)據(jù)進行開發(fā)測試，在axios請求這些假數(shù)據(jù)的時候，我們需要添加一個請求路徑，按道理來說我們寫上本地數(shù)據(jù)路徑即可，但是在項目上線的時候就得修改這些本地路徑，這樣很容易出現(xiàn)漏改，所以，vue給出了一個代理轉換機制。

首先，在static文件夾下新建一個mock文件夾用于存放假數(shù)據(jù)index.json文件：

其次，在?.gitignore?文件，添加static/mock?，目的以后在提交代碼的時候既不會提交到本地git倉庫中也不會提交到線上git倉庫中；

再次，在你的組件中寫好axios請求事件：?

methods:{

getHomeInfo?(){

? ?axios.get('/api/index.json')

? ? ? ?.then(this.getHomeInfoSuccess)

},

getHomeInfoSuccess(res){

? ?console.log(res)

}

},

mounted(){

this.getHomeInfo()

}

然后，找到?config?-- index.js --?proxyTable: { }配置項：

vue中的代理功能（其實是?webpack-dev-server提供的此方法），使用轉發(fā)機制，能將?api/index.json?請求路徑轉發(fā)到?static/mock/index.json?文件下

proxyTable: {

'/api':{

?target:'http://localhost:8080',

?pathRewrite:{

? ?'^/api':'/static/mock'

?}

}

},

最后，可以輸入localhost:8080/static/mock/index.json訪問到你的假數(shù)據(jù)（因為上面提到了，static文件夾里的文件從外部是可以訪問到的）；你也可以啟動項目將數(shù)據(jù)打印到控制臺查看；

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前文章：vue中的代理轉換機制proxyTable配置項-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.chinadenli.net/article40/igsho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、靜態(tài)網(wǎng)站、網(wǎng)站設計、軟件開發(fā)、定制網(wǎng)站、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)