vue-cli如何配置项目默认启动端口

最新推荐文章于 2025-02-26 21:58:14 发布

原创最新推荐文章于 2025-02-26 21:58:14 发布 · 1w 阅读

CC 4.0 BY-SA版权

文章标签：

7 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍如何在Vue CLI不同版本中配置项目启动端口，包括2.x版本的index.js配置方法及3.x、4.x版本通过vue.config.js或serve.js进行端口设定的方式。

前言

记录vue-cli 2.x - 4.x的项目默认启动端口配置

打开项目根目录的config文件夹，找到index.js文件，找到如图所示位置：
2.x index,js

端口的配置是port这一项，比如我们要将端口修改成3000，可以进行如下操作：

dev: {
	// 项目启动端口之后会变成3000
	port: 3000
}

3.x 与 4.x均可以使用以下方法

module.exports = {
    devServer: {
    	// 项目启动端口之后会变成3000
        port: 3000
    }
}

-第二种
打开项目node_modules/@vue/cli-service/commands/serve.js文件，位置如图：

找到如图所示位置：

然后就可以修改为自己想要的端口了，如设置为3000端口就是：

const defaults = {
  host: '0.0.0.0',
  // 端口号
  port: 3000,
  https: false
}

注意：如果同时设置了serve.js、vue.config.js最终的启动端口是以vue.config.js内的端口为准。

结语：由于是拿之前的老项目试的，可能会有出入，望大家提出错误哈哈。