Vue项目中更改启动端口详解·项目根目录·配置文件方式更可维护命令行参数方式更灵活

Vue项目中更改启动端口详解

一、通过配置文件更改

找到你的Vue项目根目录。然后创建或修改一个名为 vue.config.js 的文件（如果还没创建的话）。在里面添加或修改以下内容：

1. 创建或打开 vue.config.js 文件。
2. 添加或修改 port: 8081（这里把端口号改为你想要的值）。

保存文件并重新启动你的Vue项目，你就可以看到项目运行在新配置的端口上了。

二、通过命令行参数更改

直接在命令行中运行以下命令来启动项目并指定端口号：

npm run serve -- --port 8081

yarn serve -- --port 8081

确保端口未被占用，可以使用以下命令来查看端口使用情况：

lsof -i :8080  # Mac/Linux

netstat -ano | findstr :8080  # Windows

三、原因分析

四、实例说明

假设你的Vue项目默认运行在端口8080上，但8080端口已被占用。你需要将其更改为8081。

1. 创建或修改 vue.config.js 文件，添加 port: 8081。
2. 运行项目： npm run serve 或 yarn serve。

项目将启动并运行在8081端口上。

五、总结与建议

总结：更改Vue项目启动端口主要有两种方法：通过配置文件和命令行参数。配置文件方式更可维护，命令行参数方式更灵活。

建议：根据项目需求选择合适的方法。如果需要频繁更改端口或团队协作，推荐配置文件方式；如果只是临时更改，可以使用命令行参数方式。确保新端口未被占用，以免影响项目运行。