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 的回复