vue-cli更换端口号

最新推荐文章于 2025-07-02 00:15:00 发布
原创 最新推荐文章于 2025-07-02 00:15:00 发布 · 4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue vue-cli 框架 前端

本文介绍默认端口号8080的使用情况，并解释如何根据需要更改此端口。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

默认的端口号是8080，但是很多情况下我们需要用到这个端口号，这是我们就需要去切换端口号了，这时候就打开

然后运行

查看


就这么简单
Vue进阶（五十四）：vue-cli 脚手架 dev-server
2401_85124192的博客
06-11 1009
/ 把配置参数传递到webpack方法中，返回一个编译对象，这个编译对象上面有很多属性，自己去看吧，主要是用到里面的状态函数 如compilation，compile，after-emit这类的。// 下面是webpack-dev-server 监听的端口号，因为没有设置process.env.PORT，所以下面监听的就是config.dev.port即8080。// 下面是代理表的处理方法，看看就行了，几乎用不上，除非你是全栈，不用webpack-dev-server，使用后台语言做服务器。
vue修改vue项目运行端口号的方法
08-29
本篇文章主要介绍了vue修改vue项目运行端口号的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 修改 端口号
weixin_33738578的博客
01-25 261
具体步骤如下： vue小白交流群，希望能够帮助到大家！ 转载于:https://www.cnblogs.com/CinderellaStory/p/8350391.html
03.Vue CLI项目创建详细指南
最新发布
yk_dflkg的博客
07-02 2504
Vue CLI（Command Line Interface）是Vue.js官方提供的标准化命令行工具，用于快速搭建Vue.js项目。它提供了一整套完整的开发环境配置，包括项目结构、构建工具、开发服务器、测试框架等，让开发者可以专注于业务逻辑的开发。
[Vue]vue修改端口号
jameskaron的专栏
04-10 703
Vue修改运行端口号 解决方法：在package.json文件中进行配置，如配置port 为3090 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 3090", "build": "cross-env NODE_ENV=production w...
vue-cli项目修改端口号
蒋劲豪的博客
06-28 665
【代码】vue-cli项目修改端口号。
vue修改端口号，深入浅出前端
m0_60607895的博客
04-02 1019
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
vue-cli启动本地服务局域网不能访问的原因分析
01-19
2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问地址是localhost:端口号 3.改正的方式  找到config文件夹下的index.js文件,修改host:“localhost”为 host:”0.0.0.0″,...
详解使用nodeJs安装Vue-cli
10-19
如果8080端口被占用，可以在`config/index.js`中更改端口号。 **8. 路径配置与问题解决** 有时在本地打开打包后的文件，由于路径问题可能导致资源加载失败。例如，静态文件的路径应以相对路径（'./'）开始，而不是...
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
10-17
大部分配置项移到了新创建的 `vue.config.js` 文件中，这个文件位于项目根目录，用于自定义项目配置，如端口号、输出路径和图片路径等。这使得配置更加集中和直观。 3. **环境配置**： 在Vue CLI 3.0 中，环境变量...
vue修改端口
ljw_jiawei的博客
06-07 1252
在有node_modules的那一级目录,进入config->index.js
vue.js如何更改默认端口号8080为指定端口的方法
10-19
本篇文章主要介绍了vue.js如何更改默认端口号8080为指定端口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目怎么修改端口号
ONEBEYONDFANS的博客
08-18 2265
vue项目怎么修改端口号
爬坑日记--------vue修改启动端口号
a54464811的博客
10-28 1286
vue_lic端口号在哪里配置？     config/index.js配置文件：定义开发环境和生产环境所需的参数 // see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { sitEn
vue默认端口号的更改
weixin_47644419的博客
09-05 2219
【代码】vue默认端口号的更改。
如何修改vue项目运行的端口号
热门推荐
三分恶的博客
09-29 2万+
VUE项目默认端口是 8080 ,但是这个端口号用的太多了，所以端口号冲突了怎么办？那就得修改VUE项目的端口号，这里有两种方式。 配置文件修改端口号 打开 ==config\index.js == ，找到配置： port: 8080 可以看到端口是8080，修改成我们需要的即可： 这种方式会永久修改VUE项目启动端口号。 启动命令设置端口号 如果只是想临时修改VUE启动端口号，还有一种方式就是启动命令中设置端口号： 我们一般这么启动： npm run dev 加上参数： npm run de.
vue如何改修端口号
weixin_44594219的博客
09-05 9012
总结了cli3和cli2创建的vue项目如何修改项目运行后的端口号
vue修改指定端口
m0_56419249的博客
12-16 2469
vue修改指定端口
vue脚手架创建项目:账号登录（利用element-ui快速开发）(取消eslint强制格式）（修改端口号）
这是一个博客
03-26 2141
vue脚手架创建项目:账号登录（利用element-ui快速开发）(取消eslint强制格式）（修改端口号）
如何修改Vue-Cli端口
05-30
<think>好的，我现在需要帮助用户解决如何修改Vue-Cli的默认端口配置的问题。用户之前已经提过类似的问题，现在再次询问，可能是在之前的回答中没有完全理解或者需要更详细的信息。我需要参考用户提供的站内引用，特别是引用[1]和引用[2]，并结合之前的回答来生成新的回复。首先，用户提到想修改默认端口，之前在回答中已经给出了两种方法：通过package.json和vue.config.js。现在需要确认是否要补充其他方法或者更详细的步骤。根据引用[1]，用户已经知道可以通过修改package.json中的scripts，添加--port参数。同时，引用[1]还提到端口被占用时自动递增的问题，这点需要强调。另外，用户可能有疑问为什么修改配置后需要重启服务，这点在引用[1]中提到，修改端口等配置需要停止并重新启动服务，因为热部署不适用于这类配置更改。所以需要解释清楚这一点。接下来，我需要确保回答结构清晰，分点说明方法，并补充注意事项，比如端口占用时的处理。然后生成相关问题，考虑用户可能进一步想知道的问题，比如如何解决端口自动递增、其他devServer配置、修改后为何需要重启，以及配置HTTPS等。 还要注意用户提到的系统级指令，比如数学公式的格式，但这个问题可能不涉及数学公式，所以可能不需要处理。但需要检查是否有其他格式要求，如代码块使用正确的语法，引用标识正确添加。最后，确保回答使用中文，语言自然，步骤明确，并引用正确的来源。同时，检查是否有遗漏的信息，比如临时指定端口的方法，用户可能在之前的回答中提过，是否需要再次提及。总结步骤： 1.确认用户需求：修改Vue-Cli默认端口。2.列举两种主要方法：package.json和vue.config.js。 3.详细说明每个方法的步骤，并引用对应的引用[1]和[2]。 4.补充注意事项，如端口占用自动递增，需要重启服务的原因。5.生成相关问题，覆盖用户可能感兴趣的扩展话题。</think>### 修改Vue-Cli默认端口的方法 #### 一、通过`package.json`配置（推荐） 1. **打开项目根目录的`package.json`文件** 2. **在`scripts`中找到`serve`命令** 默认配置为： ```json "scripts": { "serve": "vue-cli-service serve" } ``` 3. **添加`--port`参数** 例如指定端口为`3000`： ```json "scripts": { "serve": "vue-cli-service serve --port 3000" } ``` 4. **重启服务生效** 执行命令： ```bash npm run serve ``` **注意**：即使指定了端口，若端口被占用，Vue-Cli会自动递增端口号（如`3000→3001`）[^1]。 --- #### 二、通过`vue.config.js`配置（永久生效） 1. **在项目根目录创建/修改`vue.config.js`文件** 2. **添加`devServer`配置项** ```javascript module.exports = { devServer: { port: 3000 // 指定端口号 } }; ``` 3. **重启服务生效** 此方式优先级高于命令行参数，且支持更多服务器配置[^1][^2]。 --- #### 三、临时指定端口（无需修改文件） 直接在命令行运行： ```bash npm run serve -- --port 3000 ``` --- #### 注意事项 1. **端口占用规则** 无论通过哪种方式指定端口，若端口被占用，Vue-Cli会自动尝试递增端口号[^1]。 2. **热更新限制** 修改端口属于服务配置变更，需**重启服务**才能生效（热部署仅针对代码修改）[^1]。 3. **配置优先级** `vue.config.js` > 命令行参数 > 默认配置。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值