Vue 項目配置文件中的 devServer

Web 項目部署時，會將前端和後端打包好放到服務器中。比如將 Vue 項目和 SpringBoot 項目打包好放到 Tomcat 中。

然後瀏覽器通過 HTTP 等協議從服務器獲取 HTML、JS、CSS 等靜態文件，之後 JS 請求庫發 HTTP 請求到後端，後端根據請求返回數據，就這樣不斷交互。

在開發 Vue 項目的時候，後面沒有 Tomcat 來響應 HTTP 請求，之所以還是能夠在瀏覽器中訪問地址進行測試，是因爲 Vue 項目啓動了一個本地服務器。

vue.config.js中的 devServer 是用來配置這個本地服務器的。

• port 配置服務器監聽的端口號
• host 配置服務器監聽的主機名

devServer: {
  port: 8080,
  host: 'localhost',
  https: false
}

打開瀏覽器開發者工具查看網絡請求，會發現請求指向http://localhost:8080。

瀏覽器請求 HTML、JS、CSS 等靜態文件時，本地服務器返回相關數據。請求庫請求後端接口時，本地服務器負責將請求轉發給後端。轉發規則在 devServer.proxy 中配置：

devServer: {
  proxy: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
    }
  }
}

這個配置項的意思是，將所有以 /api 開頭的請求代理到http://localhost:3000上。其中 changeOrigin 表示將請求頭中的 Host 字段設置爲 target 的值，pathRewrite 表示對請求路徑進行重寫。在這個例子中，對於以 /api 開頭的請求路徑，將其重寫爲空，即去掉 /api 前綴。

當前端使用 axios 請求 /api/users 時，devServer 會將請求轉發到http://localhost:3000/users。

參考：ChatGPT 的回覆