主要通過Cli裏面的devServer選項進行配置:
devServer.proxy
如果你的前端應用和後端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
比較好理解,前端配置代理,這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000。
cli的devServer使用的webpack一樣,舉個簡單配置例子:
module.exports = {
devServer: {
port: 4000, //前臺代理端口
proxy: {
'/api': {
target: 'http: //171.6.6.23:8080',//後臺接口
ws: true, //如果要代理websockets
changeOrigin: true //將選項changeOrigin設置true爲基於名稱的虛擬託管站點。
}
}
}
}