vue项目设置proxy代理，客户端或浏览器如何去查看代理地址（2024-5-30）

---

1、简介

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。

---

2、客户端查看代理地址

vue.config.js 文件 

// vue.config.js代理配置
module.exports = {
  devServer: {
    proxy: {
      '/dev-api': {