Vue端口配置修改步骤

vue配置改端口

在前后端分离的开发场景中，端口冲突是个常见的小麻烦。这里分享一个清晰且经实践验证的配置方法，供各位开发者参考。

为何需要修改端口？

Vue前端项目和Spring Boot后端项目的默认开发服务器端口，通常都是 http://localhost:8080/。同时运行两者时，必然会产生冲突，导致其中一个服务无法正常启动。解决思路很简单：让它们使用不同的端口。下面的操作将以修改Vue前端的端口为例。

定位配置文件

首先，在你的Vue项目根目录下，找到 vue.config.js 这个文件。如果项目创建时没有生成该文件，手动新建一个即可。

用你的IDE或代码编辑器打开它。

默认配置状态

一个全新的 vue.config.js 文件通常是空的，或者只包含一些基础注释。这表示所有配置都采用Vue CLI的默认设置。

添加端口配置代码

接下来，在文件中添加以下配置代码。这里以将开发服务器端口改为8082为例，你可以根据需要替换为任何未被占用的端口号。

module.exports = {
  devServer: {
    port: 8082
  }
}

添加并保存后，你的配置文件内容应该如下所示：

验证配置生效

重新启动你的Vue开发服务（通常运行 npm run serve 或 yarn serve）。当终端输出日志时，注意观察服务监听的地址。

如上图所示，当出现类似 App running at: - Local: http://localhost:8082 的提示时，就意味着端口修改已经成功生效了。

总结

通过修改 vue.config.js 中的 devServer.port 选项，可以快速解决本地开发时的端口冲突问题。这个方法直接、有效，是Vue开发者工具箱中的一个实用小技巧。希望这个步骤分解能帮助你更顺畅地进行后续开发工作。