Vue 配置請求轉發（vue2 和 vue3 的方式不同）

前言

使用 Vue 和 Spring Boot 開發前后端分離項目時，配置前端項目和后端項目在不同的端口下啟動。

步驟

vue3

在使用 vue-cli3 創建項目后，在項目的根目錄下，新建 vue.config.js 文件，來配置關於請求轉發：

let proxyObj = {};
proxyObj["/"] = {
    ws:false, // 關閉 webSocket
    target: "http://localhost:8081", // 后端的地址
    changeOrigin: true,
    pathRewrite: {
        '^/':''
    }
}

module.exports = {
    devServer:{
        host: "localhost",
        port: 8080,
        proxy: proxyObj
    }
}

將所有的 / 開頭的請求轉發到 8081 端口的地址上去。

注意：修改了配置文件 vue.config.js 之后必須重啟，否則不會生效。

vue2

在 vue2 中，有一個 config 目錄，在 vue3 中，這個目錄是不存在的。

修改 config 目錄下的 index.js 文件，修改 proxyTable,代碼如下：

    proxyTable: {
      '/':{
        target: "http://localhost:8081", // 這個就是后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    }

如下圖：

參考文章：https://blog.csdn.net/weixin_43272781/article/details/105019133

每天學習一點點，每天進步一點點。