Vue CLI是一個方便快捷的開發工具,可以幫助我們快速搭建一個基于Vue.js的項目。但是,在開發過程中,有時候我們需要訪問一些其他的API,并不是我們本地的API。這個時候,我們就需要使用代理來轉發請求,使得我們可以正常訪問其他API。
對于Vue CLI來說,我們可以在vue.config.js文件中進行代理的配置。
//vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://xxx.xxx.xxx.xxx:xxxx', //要代理的API地址
changeOrigin: true,
pathRewrite: {
'^/api': '' //url中的/api需要去掉
}
}
}
}
}
上面的代碼中,我們使用了proxy屬性進行配置。'/api'代表了要代理的url,target屬性代表了要轉發請求的地址。這里只需要將其改為真實的去掉url請求路徑的服務器地址即可。
changeOrigin為true,表示會更改請求的源,否則請求頭中的host會保持原來的請求地址。這只有在開發過程中使用代理時需要使用。
pathRewrite屬性是一個重要的字段,代表了重寫的請求路徑。例如,我們的本地訪問路徑可能是'/api/getList',但是實際上我們要代理的路徑是'/getList',那就需要將url中的'/api'去掉。
通過這樣的配置,我們就可以方便快速地完成接口轉發。需要注意的是,在不用代理時,一定要將vue.config.js文件中的proxy配置刪除或者注釋掉,不然可能會導致一些問題。
下一篇vue子節點刪除