How to change port number in vue-cli project

在Vue CLI项目中更改端口号是一个常见的需求，因为默认的端口号可能与其他服务冲突，或者因为部署的需要要使用特定的端口。更改端口号可以通过修改项目的配置文件来实现。

步骤 1: 修改 vue.config.js 文件

Vue CLI 项目通常在根目录下有一个名为 vue.config.js 的配置文件。如果该文件不存在，您可以手动创建一个。

在 vue.config.js 文件中，您可以设置一个 devServer 对象，用来配置开发服务器的选项，其中包括端口号。例如，如果您想将端口号更改为 8081，可以这样设置：

javascript
module.exports = {
  devServer: {
    port: 8081
  }
};

步骤 2: 重启开发服务器

更改配置文件后，需要重启开发服务器以使新的配置生效。您可以通过终止当前的服务器进程，然后重新运行 npm run serve 来重启服务器。

示例

假设我在开发一个Vue应用，由于本地的8080端口被其他应用占用，我需要把Vue应用的端口号改为5500。首先，我会检查项目根目录下是否有 vue.config.js 文件。如果没有，我会创建一个，并添加如下配置：

javascript
module.exports = {
  devServer: {
    port: 5500
  }
};

然后，我会停止当前的开发服务器（通常是通过在终端中按 Ctrl + C），然后重新运行 npm run serve。现在，开发服务器应该会在新的5500端口上启动，而不是默认的8080端口。

这样，通过简单的配置修改和服务器重启，我们就可以改变Vue CLI项目的端口号，从而避免端口冲突或满足特定部署需求。