Vue3 设置默认目标服务器的 URL

最新推荐文章于 2025-05-20 22:15:00 发布

原创最新推荐文章于 2025-05-20 22:15:00 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #vue.js #前端

当Vue和SpringBoot在同一端口8080运行导致冲突时，可通过修改SpringBoot的端口为8085，并在vue.config.js中配置devServer的代理解决。在axios请求时，可以直接使用相对路径，devServer代理会将请求转发到指定的后端地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

在本地开发，由于 vue 端口和 spring boot 端口都在 8080, 会产生冲突，所以我将 spring boot 的端口改为了 8085 , 在 application.yml 中直接修改，如下所示

server:
  port: 8085

然后本地去连，直接完整路径的 axios 请求是可以的，比如

axios({
        method: "GET",
        url: "http://localhost:8085/getVaule",
      })

通过 action 的方式访问后端却不可以，因为他是在默认 8080 的端口上。

二、解决方法

在 vue.config.js 中新建 devServer, 如以下

    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:8085', //设置你调用的接口域名和端口号 别忘了加 http
                changeOrigin: true,
                ws: false,
                pathRewrite: {}
            }
        }
    }