vue项目（vue-cli3搭建的）每次启动端口都会增加1的问题

最新推荐文章于 2024-02-21 16:46:17 发布
最新推荐文章于 2024-02-21 16:46:17 发布
阅读量2k 收藏 4
点赞数
文章标签： vue.js npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_sos0/article/details/121076334
版权

最近发现我的项目（vue-cli3搭建）每次重新执行 npm run serve 启动端口都会自增1，查了网上的原因才发现原来端口被占用了，原来的服务没有真正的被关闭，解决方法：

执行 netstat -aon|findstr “8080” 查看端口是否被占用 如果被占用说明服务没有真正被关闭

在这里插入图片描述

或： 执行 netstat -aon|findstr “9999” 查看端口是否被占用 如果被占用说明服务没有真正被关闭


1.打开任务管理器，手动关闭node任务（我的解决办法）

再次执行 netstat -aon|findstr “8080”，就正常了

 在这里插入图片描述

 我的是 再次执行 netstat -aon|findstr “9999”，就正常了

2.portfinder的问题（没试过）
执行npm install portfinder@1.0.21 重新安装一下portfinder即可
 

Arenaschi
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-cli3项目升级到vue-cli4 的方法总结
10-15
主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
更改前端vue端口号
最新发布
y15231057653的博客
04-10 247
【代码】更改前端vue端口号。
vue项目设置的端口号运行后会自动加一问题解决
相关项目可以查看https://gitee.com/fan-pl或https://github.com/fpl1116
02-21 506
vue项目设置的端口号运行后会自动加一问题解决
Linux系统下：解决每次启动vue项目时，服务器端口号+1问题
weixin_44979308的博客
12-14 892
Linux系统下：解决每次启动vue项目时，服务器端口号+1问题。 一句命令输出PID值，杀死任务进程，可用于界面命令操作、脚本语言等。
Vuetify 运行后端口号每次增加1解决方法
rpc18738669720的博客
04-15 1136
Vuetify 运行后端口号每次增加1解决方法 方法一： 项目下cmd执行npm install [email protected] 此命令在于Vuetify 版本不兼容问题，对版本进行降级操作来解决问题。 方法二： 使用cmd命令查看端口是否被占用，netstat -aon|findstr “9001” 红框内为占用的程序PID 输入tasklist命令可以看进程详情 ...
前端代码调试：Webstorm调试js
热门推荐
EricaKang 的专栏
11-30 2万+
【前言】 目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试，浏览器工具使用不方便，webstorm支持了在代码上打断点，在编辑器里debug js代码。类似Java后台 Eclipse debug效果。接下来就给大家介绍如何安装webstorm和对webstorm进行配置调试代码。 【Webstorm下载与安装】 1.官网
vue项目启动不是8080端口，多次启动端口变化（端口占用）
qq_45251343的博客
07-17 4255
当我一边运行idea，然后命令启动vue的时候，我发现端口不是8080，而是8081，于是我便想到，应该是我8080端口被占用了，果断关闭了idea，再关闭vue，重启端口又变成了8080，有人说是我改过我自己的端口号，但我觉得不对，于是我就有了这篇博客 好奇心促使我又运行了一次vue，此时两个vue同时运行，情况如下 如果我们停掉之后发现还是8080端口被占用，或者说你自己想用8080以外的端口，但那个端口依然被占用 此时你就需要看我这个笔记了8080端口被占用解决办法只需要将里面命令的8080换成你
Webstrom debug调试工具 JetBrains IDE Support
weixin_43924896的博客
12-09 1327
  当我们在采用WebStorm编写前端页面的时候总会遇到需要调试的地方,不论是跟随debug详细查看源码中每一步的跳转,还是修复研发中所存在的bug问题,因此配置一个完善的debug环境对于研发效率是有很大的提升的.因此给大家推荐一个基于谷歌浏览器的调试插件JetBrains IDE Support JetBrains IDE Support是什么：JetBrains IDE Support是一...
vue3创建项目（五）vite配置端口号
zhangxueyou2223的博客
06-29 6701
Vue3配置代理跨域和服务端口等配置，可以在 vite.config.js 进行配置。(类似用 vue-cli 的 vue.config.js）
Vue专题（三）vue项目启动端口更改
XueZePeng18729875380的博客
03-15 3869
1. Vue项目的默认端口是8080，不修改的情况下启动项目之后端口就是8080，若8080端口已经被占用了，端口号会进行递增。2. 在config文件夹下的index.js文件中可以进行配置。更改port的值，重新运行项目即可。
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
:rocket: 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 特性 CSS 预编译语言： Ajax: ，做了一定的封装，详见 src/services/request.js SVG 雪碧图： 移动 web 的适配方案：引入了 postcss-...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
主要介绍了vue脚手架（vue-cli）搭建项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用Vue-cli 3.0搭建Vue项目的方法
01-21
1. 环境准备 1.1. 安装Node.js （建议使用LTS版本） 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls ...1.4. 安装vue-cli 3
基于Vue-cli快速搭建项目的完整步骤
12-09
前言 vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。...二、vue-cli快速搭建项目 安装完成后，同时在
vue项目在使用ip地址加端口号不能访问时
weixin_43756060的博客
02-21 2929
修改package.json文件的scripts属性下的dev属性 加上–host 0.0.0.0后再重启服务器 "scripts": { "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev...
vue项目默认端口号
m0_55477902的博客
01-18 1000
本地启动vue项目时，明明在vue.config.js中配置的端口号为默认的80，但启动后端口号总是从1024开始，如果被占用则会在占用的端口号上+1，一直没想通，最近才知道原来mac os的默认端口号windows不同。在mac os中，非root用户是无法使用小于1024的常用端口的。如果小于1024端口，会从1024开始。vue项目如果要自定义端口号，有几种方式。
Vue项目部署及使用WebStorm开发Vue
ruarua的博客
12-10 1万+
博客内记录小白我在Vue项目部署与使用WebStorm开发Vue时的经验，包括搭建Vue环境，新建Vue项目，WebStorm相关配置，配置路由，前后端对接 ，axios简单封装ajax，config配置等。详细内容会持续更新，如果写的有问题欢迎大家指出
使用vue-cli快速搭建前后端分离项目怎么改端口
03-25
使用vue-cli快速搭建前后端分离项目的默认端口是8080，如果需要更改端口，可以按照以下步骤进行操作： 1. 打开项目根目录下的config文件夹，找到index.js文件； 2. 在文件中搜索“8080”，会发现有多处出现这个端口，其中一处如下所示： ``` dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, webpack will display hints and warnings when your code is not optimized for production. // See https://webpack.js.org/guides/production/#optimization-hints. showEslintErrorsInOverlay: false, } ``` 这里的port就是当前项目使用的端口，将它改成你需要的值即可。 3. 保存文件后，重新启动项目，新的端口就会生效了。例如： ``` npm run dev --port 8888 ``` 或者修改package.json文件中scripts的启动命令： ``` "scripts": { "dev": "vue-cli-service serve --port 8888", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, ``` 然后启动项目： ``` npm run dev ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Arenaschi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值