vue-cli项目修改端口号的方法

vue-cli 项目修改端口号的方法

在 Vue.js 项目开发中，vue-cli 是一个常用的脚手架工具，它提供了一个快速搭建 Vue 项目的环境。默认情况下，vue-cli 在启动开发服务器时会使用默认的端口号（一般是 8080），但在某些情况下，我们可能需要修改项目的端口号，例如避免端口冲突或与其他服务配合使用。本文将介绍在 vue-cli 项目中如何修改端口号的方法。

在 vue-cli 3.x 版本中，修改端口号非常简单。首先，在项目的根目录下找到 vue.config.js 文件（如果没有，则需要手动创建），然后在该文件中添加以下内容：

module.exports = {
  devServer: {
    port: 8888, // 修改为你想要的端口号
  },
};

上述代码中，我们通过 devServer 字段配置了开发服务器的选项，其中 port 字段指定了我们想要使用的新端口号（例如 8888）。保存文件后，重新启动开发服务器，你将会看到项目使用新的端口号进行运行。

在 vue-cli 2.x 版本中，修改端口号稍微有些不同。在项目的根目录下找到 config 文件夹，然后打开 index.js 文件。在该文件中找到以下代码：

module.exports = {
  // ...
  dev: {
    port: 8080, // 默认端口号
    // ...
  },
  // ...
};

将上述代码中的 port 字段修改为你想要的新端口号，保存文件后重新启动开发服务器即可生效。

无论是在 vue-cli 3.x 还是 2.x 版本中，修改端口号的方法都是通过配置相应的配置文件来实现的。通过修改 vue.config.js 或 index.js 文件中的 port 字段，我们可以指定项目的新端口号。

需要注意的是，修改端口号后，确保没有其他进程或服务正在使用该端口。否则，会导致端口冲突并无法正常启动项目。

总结而言，通过简单地编辑相应的配置文件，我们可以轻松地在 vue-cli 项目中修改端口号。这使得我们能够灵活地调整项目的端口，以适应不同的开发环境和需求。