一、在 vue.config.js 中添加配置

devServer: {proxy: 'http://localhost:5000' }

優點：配置簡單，請求資源時直接發送給前端（8080）即可

缺點：不能配置多個代理，不能靈活的控制請求是否走代理

工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那么該請求會轉發給服務器（優先匹配前端資源）

二、具體代理規則：

module.exports = {devServer: {proxy: {'/api1': { // 配置所有以 /api1 開頭的請求路徑target: 'http:localhost:5000', // 代理目標的地址changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': {target: 'http:localhost:5000',changeOrigin: true,pathRewrite: {'^/api2': ''}},}} }/*changeOrigin : true(默認) --> 服務器收到的請求頭中的 host 為：localhost:5000changeOrigin : false --> 服務器收到的請求頭中的 host 為：localhost:8080 */

優點：可以配置多個代理，且可以靈活的控制請求是否走代理

缺點：配置略微繁瑣，請求資源時必須加前綴

三、使用 vue-resource 發送請求（方式和 axios 一樣）

安裝 vue-resource

npm i vue-resource;

步驟

// 安裝之后 VueComponent 對象上面多了 $http 對象 this.$http.get(...)

總結

以上是生活随笔為你收集整理的Vue 脚手架配置代理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。