修改 Vue 项目的端要这几招-直接在-步骤打开 Vue 项目的根目录

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

第一步，在你的 Vue 项目根目录里找到或创建一个 `vue.config.js` 文件。

第二步，在这个文件里添加或修改 `port` 配置项，比如这样：

port: 5000

然后，当你用 `npm run serve` 或 `yarn serve` 启动项目时，它就会在5000端口上运行了。

如果你不想修改配置文件，也可以在启动项目时直接指定端口：

npm run serve -- --port 5000

或者使用 Yarn：

yarn serve --port 5000

这种方法适合临时改变端口，不会影响到项目的配置文件。

你也可以直接在 `package.json` 文件中修改启动脚本：

"scripts": {
  "serve": "vue-cli-service serve --port 5000"
}

这样每次运行 `npm run serve` 或 `yarn serve` 时，项目都会在5000端口上启动。

在开发的时候，如果你的电脑上有很多项目同时运行，可能会遇到端口冲突的问题。或者你的公司有特定的端口号规范，就需要修改端口来适应。

不要用那些常见的端口，比如80、443等。最好使用1024以上的端口号，这样可以避免和系统保留端口冲突。

场景1：如果开发者A和B都在用8080端口运行Vue项目，会发生冲突。修改端口后，就可以避免这种情况。

场景2：如果你的公司规定开发环境用3000端口，测试环境用4000端口，通过修改端口，就能满足这些要求。

总结来说，修改 Vue 项目端口的方法有三种：在 `vue.config.js` 中设置，通过命令行参数指定，以及修改 `package.json` 中的启动脚本。

建议在团队开发中统一端口号规范，这样就可以避免冲突。同时，根据不同的环境（开发、测试、生产）使用不同的端口号，有助于管理和区分。

步骤：

默认端口是8080。修改方法同上，只需将 `port` 的值改为你想要的端口号即可。

直接在命令行中运行项目启动命令，并加上 `--port` 参数和端口号。

npm run serve -- --port 5000

修改 Vue 项目的端要这几招-直接在-步骤 打开 Vue 项目的根目录