在Vue.js项目中修改调试端口，通常需编辑根目录下的vue.config.js文件，在devServer配置项中，将port属性修改为指定数字即可，保存文件并重启开发服务器后，应用将在新的端口号上运行，从而解决默认端口冲突的问题，或适应特定的开发环境需求。
Vue.js 开发环境端口冲突？Vue CLI 与 Vite 修改调试端口全攻略
在 Vue.js 的日常开发中，默认的调试端口 8080 往往是“众矢之的”，由于该端口使用率极高，一旦本地安装了多个开发环境服务（如 IDEA 自带的 Tomcat），或者某些系统服务占用了该端口，就会导致项目启动失败或服务无法访问。
为了解决这一痛点,开发者通常需要手动指定一个新的调试端口，本文将详细介绍在不同版本的 Vue 项目中，如何优雅地修改调试地址的端口号。
Vue CLI 项目（Vue 2 或 Vue 3 默认脚手架）
如果你使用的是传统的 Vue CLI 创建的项目，修改端口号主要通过项目根目录下的 vue.config.js 文件来实现。
检查与创建配置文件
请在项目根目录下查找是否存在 vue.config.js 文件。
- 如果存在：直接进行第 2 步。
- 如果不存在：请手动创建一个 JS 文件，命名为
vue.config.js。
配置端口与优化项
在文件中引入 module.exports，并在 devServer 属性下进行配置，除了端口，建议一并配置 open（自动打开浏览器）和 proxy（代理设置）。
// vue.config.js
module.exports = {
devServer: {
port: 8081, // 修改为你想要的端口号，8081
open: true, // 可选：配置为 true，启动服务后自动打开浏览器
// proxy: { ... } // 可选：配置开发环境的接口代理
}
}
操作提示：保存文件后，必须重启开发服务器（即重新运行 npm run serve 或 yarn serve），配置才会生效。
Vite 项目（Vue 3 + Vite）
随着 Vue 3 的普及，Vite 已成为默认构建工具，Vite 的配置更加现代化，基于 ES Module，配置文件通常位于根目录。
打开配置文件
找到项目根目录下的 vite.config.js（或 .ts）文件。
配置 Server 属性
在 export default 导出的对象中，找到 server 属性进行修改。
// vite.config.js
export default {
