Vue修改项目启动端口号方法

下面是详细讲解如何修改Vue项目的启动端口号。

Vue项目启动端口号修改方法

Vue项目启动默认端口号为8080，如果该端口号冲突或者需要更改，可以按以下步骤修改：

第一步：修改package.json文件

在Vue项目根目录下找到package.json文件，将其中的scripts项中的"start"命令中的端口号修改为自己需要的端口号，例如：

"scripts": {
   "start": "vue-cli-service serve --port 8888",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
}

将上述代码中的"--port 8888"修改为"--port 9999"即可将启动端口号改为9999。

第二步：修改Vue项目配置文件

找到Vue项目根目录下的vue.config.js文件（如果没有则需要手动创建），添加如下代码：

module.exports = {
  devServer: {
    port: 9999 // 修改的端口号
  }
}

通过设置devServer.port的值即可修改端口号为9999。如果vue.config.js文件中已经存在devServer项，则只需添加其中的port属性即可。

示例说明1：将端口号改为3000端口

1. 打开根目录下的package.json文件，将scripts项中的"start"命令的端口号修改为3000，如下所示：

"scripts": {
   "start": "vue-cli-service serve --port 3000",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
}

1. 在根目录下创建或打开已存在的vue.config.js文件（如果没有则需要手动创建），添加如下代码：

module.exports = {
  devServer: {
    port: 3000
  }
}

这样就将Vue项目的启动端口号改为了3000。

示例说明2：将端口号改为8888端口

1. 打开根目录下的package.json文件，将scripts项中的"start"命令的端口号修改为8888，如下所示：

"scripts": {
   "start": "vue-cli-service serve --port 8888",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
}

1. 在根目录下创建或打开已存在的vue.config.js文件（如果没有则需要手动创建），添加如下代码：

module.exports = {
  devServer: {
    port: 8888
  }
}

这样就将Vue项目的启动端口号改为了8888。

以上是Vue项目启动端口号修改的方法和示例讲解，如果还有不明白的地方，请在评论区留言。