在Vue项目的开发过程中，有时候会遇到端口被占用或者需要指定特定端口的情况。这时候，我们就需要调整NPM运行的端口。以下是一些关于如何在Vue项目中调整NPM运行端口的详细步骤和技巧。
使用命令行参数设置端口
最简单的方式是通过命令行参数来设置端口。Vue CLI 提供了一个简单的命令来调整开发服务器端口。
打开命令行终端。
进入您的 Vue 项目目录。
使用以下命令指定端口号（例如，设置端口号为8082）：
npm run dev -- --port 8082
或者使用短格式：
npm run dev -p 8082
这样，您就可以在运行 npm run dev 的同时，通过参数来指定 Vue CLI 的开发服务器使用的端口号。
使用配置文件设置端口
如果您需要经常调整端口，或者在不同的开发环境中使用不同的端口，那么使用配置文件来设置端口会是一个更合适的选择。
修改 vue.config.js
Vue CLI 3.x 及以上版本中，可以通过修改 vue.config.js 文件来设置端口。
打开 vue.config.js 文件。
找到 devServer 配置项，并设置 port 属性：
module.exports = {
// ...
devServer: {
port: 8082, // 你希望设置的端口号
// ...
},
// ...
};
保存文件并运行 npm run dev。
使用环境变量设置端口
除了上述两种方法，您还可以通过设置环境变量来指定端口。
在项目根目录下创建一个 .env.development 文件。
在文件中添加以下内容：
VUE_APP_DEV_SERVER_PORT=8082
运行 npm run dev，Vue CLI 会自动读取这个环境变量来设置端口。
端口配置技巧
端口冲突处理：在设置端口时，要注意避免端口冲突。可以使用 netstat 或 ss 命令来查看端口占用情况，并选择一个未被占用的端口。
自动化配置：在大型项目中，可以将端口的设置自动化，例如在 package.json 中定义一个脚本：
"scripts": {
"dev": "vue-cli-service serve --port=8082"
}
这样，每次运行 npm run dev 都会自动使用指定端口。
版本控制：在修改配置文件后，记得将更改提交到版本控制系统中，以便其他团队成员可以知道端口的变化。
通过以上方法，您可以在Vue项目中轻松调整NPM运行的端口，提高开发效率和灵活性。