在使用Vue CLI時，使用代理設(shè)置對于許多人來說是至關(guān)重要的。這意味著您可以從您本地的開發(fā)環(huán)境中請求遠程服務(wù)器上的數(shù)據(jù)。

但是，在Vue CLI中進行代理設(shè)置并不簡單。在本文中，我們將詳細介紹如何設(shè)置Vue CLI的代理。

首先，我們需要在Vue CLI項目中安裝http-proxy-middleware。如果您使用的是Vue CLI2，則可以使用以下命令進行安裝：

npm install http-proxy-middleware --save-dev

如果您使用的是Vue CLI3，則該包已經(jīng)被安裝并可用。

接下來，我們需要在Vue CLI項目中創(chuàng)建vue.config.js文件。如果您使用的是Vue CLI2，則可以在src目錄下創(chuàng)建此文件。

在vue.config.js文件中，我們需要使用module.exports導(dǎo)出一個配置對象。此對象應(yīng)包含一個devServer屬性，例如：

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
}

在這個配置中，我們創(chuàng)建了一個代理對象，該對象的鍵是“/api”，它將代理到“http://localhost:3000”。

這里需要注意的是，如果您的后端服務(wù)也在本地開發(fā)機器上運行，那么“http://localhost:3000”可能會與您的前端服務(wù)發(fā)生沖突。在這種情況下，請使用其他端口號。

另外，我們使用了changeOrigin選項，這是為了確保請求的來源與代理服務(wù)的來源相同。

一旦設(shè)置了代理，我們就可以在Vue組件中使用axios或fetch等HTTP客戶端來請求數(shù)據(jù)。我們可以這樣使用：

axios.get('/api/users').then(response =>{
console.log(response.data);
});

在這個例子中，我們請求了“/api/users”，但實際上我們請求的是“http://localhost:3000/api/users”。我們的代理服務(wù)器會將請求代理到那里，并將響應(yīng)返回給我們的Vue組件。

在這篇文章中，我們學(xué)習了如何在Vue CLI項目中設(shè)置代理。通過使用http-proxy-middleware和Vue.config.js文件，我們可以輕松地將請求代理到本地開發(fā)機器上的遠程服務(wù)器。