vuejs第一次配置好了，localhost:8080能显示。但是我关了电脑或者程序再次输入就不能显示

最新推荐文章于 2025-03-10 09:50:28 发布

前端Joy姐

最新推荐文章于 2025-03-10 09:50:28 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/juceli/article/details/79549997

本文讲解了如何在同一台计算机上同时运行多个开发服务，并解决端口冲突问题。介绍了关闭服务的影响及如何正确启动服务，还提供了配置不同端口的方法。

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

跑两个服务相当于启动两个server，就跟服务器上的nginx一样的，你关了电脑进程都关了当然就没了，每次进来开发测试之前，把npm run dev启动好。

多个项目你不改端口，第二个项目端口被占用就启动不了，除非你另一个项目把端口配制成别的。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端Joy姐

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【零散知识点总结1】

weixin_44543307的博客

03-06

6980

零散笔记总结@Reference、@Autowired和@Resource的区别：Dubbohttp和HTTPSvue.js跟thymeleaf 的区别web开发，提供3个@Component注解衍生注解（功能一样）取代 @Reference、@Autowired和@Resource的区别： @Reference：是dubbo的注解，也是注入，他一般注入的是分布式的远程服务的对象，需要dubbo配置使用。 @Autowired：org.springframework.beans.factor

vue_t_v14

l1029455098的博客

03-21

2946

vue

2 条评论您还未登录，请先登录后发表或查看评论

解决 Vue 项目启动时的端口占用问题：从错误到解决方案

最新发布

肥晨开发的学习之路

03-10

1195

今天我们来聊聊一个在 Vue 开发中经常遇到的“拦路虎”——端口占用问题。无论你是新手还是老手，这篇文章都能帮你轻松搞定端口占用问题！如果你不想终止其他进程，或者你希望保留当前运行的服务，可以通过修改 Vue 项目的配置文件来更改端口号。无论你选择哪种方法，都能让你从“端口占用”的泥潭中解脱出来，继续愉快地开发 Vue 项目！你的心情可能瞬间从“期待”变成了“崩溃”。，准备启动 Vue 项目时，突然蹦出一堆红色错误信息，其中最显眼的就是。重启项目，项目可能会重新选择一个端口，就不会有端口占用问题。

安装完tomcat成功后，Eclipse打开lochalhost：8080失败解决方法

07-04

解决开发中配置问题

解决运行Vue项目localhost8080拒绝连接

weixin_46801232的博客

07-29

3578

解决运行Vue项目localhost8080拒绝连接

vue项目使用localhost访问不到

weixin_45926412的博客

09-28

1639

vue项目使用localhost访问失败

Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开

weixin_42222436的博客

11-04

5205

vue-cli 5.x 版本使用–open 时，默认打开浏览器，会出现0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开，但是每次都需要修改就很烦人。

Vue2.0 新手填坑攻略 — 从环境搭建到发布

wqs977的博客

05-03

1444

Vue2.0 新手完全填坑攻略—从环境搭建到发布阅读 14549 收藏 839 2016-10-11 主页： http://139.129.206.76 Jinkey原创 showonne、yubang 技术指导https://github.com/showonnehttps://github.com/yubangDemo 地址:http://

Vue2.0 推荐开发环境

大熊的博客

06-28

4650

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2 安装环境打开终端运行以下命令安装brew（Windows 跳过这步） /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.

vue笔记总结

qq_44417271的博客

02-01

1650

VUE vue框架的两大核心：数据驱动和组件化。第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM）第二周：大家需要转变编程思维的习惯：组件化一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签，实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM

localhost8080拒绝连接，解决方法

weixin_42888180的博客

10-18

2092

添加以上这段代码，换成8787，实际上大家可以换成其他的，然后就可访问了，如果还不行的话需要找其他方法了！文件夹里找到config.js。

【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求

热门推荐

No8g攻城狮的博客

04-06

6万+

出现如图所示，8081端口被占用，且占用该程序的PID号为143132，接着【Ctrl + Alt + Delete】打开任务管理器，找到PID号为143132的进程，结束该进程，然后再重启服务项目即可。项目未成功启动，则需要查看前端项目为什么没有启动成功，这个原因复杂不再具体说明，可以试着重启服务项目，多重启几次。打开“我的电脑”，选择左上角的“计算机”中的“卸载或更改程序”。点击确定，然后浏览器验证，localhost已经可以访问了！（此处我查看的端口是8081，注意更换成自己的端口号）

windows 运行vue项目打开地址为 http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 127.0.0.1:8080 可正常打开。

Jovan的博客

09-27

1万+

windows 运行开发模式命令 npm run dev，启动后默认自动打开浏览器，但是打开地址为 http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 127.0.0.1:8080 可正常打开。每次手动更改不是办法，所以需要调整下代码，能够自动打开后就能正常访问。 ...

localhost8080拒绝连接【已解决】

rayding的博客

11-07

3万+

新换了电脑，安装vue的时候发现浏览器显示无法访问，若确定自己的服务正常的情况下，两个步骤解决，特此记录！

Vue 项目启动默认打开 http://0.0.0.0:8080 ，浏览器无法访问

Vvaans的博客

03-08

3111

5.x 版本使用–open 时，默认打开浏览器，会出现 0.0.0.0:8080，浏览器显示无法访问。或者在 package.json 中的启动命令添加–host localhost。在 devServer 配置项中添加 host 为 localhost。虽然这个方案解决了问题，但是也产生了新的问题，并不完美。在 vue.config.js 文件中配置进行如下配置。我们可以看到此时的两个地址是相同的。vue.config.js 配置。所以有了第二个解决方案。这里设置的优先级更高。

Vue 项目运行完成后自动打开浏览器【多种方法】

qq_22841387的博客

02-20

5637

本文介绍了几种在 Vue 项目中自动打开浏览器的方法，包括通过修改、配置文件、使用 Webpack 插件，以及通过环境变量动态配置。不同的方法适用于不同的场景，开发者可以根据自己的项目结构和需求选择合适的方案。通过合理使用这些配置，可以大大提高开发效率，减少重复的手动操作，让你更专注于业务逻辑的开发。提示：在生产环境中，建议关闭自动打开浏览器的功能，以避免不必要的浏览器窗口弹出影响服务器性能。

vue项目中浏览器自动打开，出现网址0.0.0.0:8080页面错误

m0_64351096的博客

09-21

2691

vue项目中浏览器自动打开，出现网址0.0.0.0:8080页面错误

vue.js开发环境搭建以及访问页面http://localhost:8080问题解决

晴天的博客

08-15

5万+

CentOS 6.8下安装vue.js 1.安装node.js [root@node6 ~]# curl -sL https://rpm.nodesource.com/setup_8.x | bash - 注：这里我是安装的v8.11.3版本的，8.x表示v8版本 [root@node6 ~]# sudo yum install -y nodejs 验证结果，有如下信息表示安装成功。 ...

localhost拒绝连接请求vue

02-10

### 可能的原因分析当遇到 `localhost` 拒绝连接请求的情况时，可能存在多种因素导致这一现象。具体来说： - **项目未成功启动**：尽管表面上看 Vue 项目似乎已经正常运行并显示了访问地址，但实际上可能并未完全初始化完成[^2]。 - **端口冲突**：如果其他应用程序正在使用相同的端口号（如8080），那么这可能会阻止新的服务器实例绑定到该端口上，从而造成无法建立连接的问题。 - **防火墙设置不当**：某些情况下，操作系统自带的安全防护机制会拦截来自本地网络接口的入站流量，特别是对于新安装的应用程序而言更为常见[^1]。 - **代理配置错误**：在开发环境中设置了不正确的 HTTP(S) 代理也可能引发此类问题，尤其是在尝试通过 Axios 发起 API 调用的时候[^4]。 - **Windows 功能缺失**：部分 Windows 版本默认禁用了必要的 IIS 或者 Web 开发支持组件，这也可能是原因之一。 ### 解决方案建议针对上述提到的各种可能性，可以采取以下措施来排查和解决问题： #### 方法一：验证应用状态确认 Vue 应用确实处于监听模式下，并且能够响应外部请求。可以通过命令行工具查看进程列表以及开放端口的信息来进行初步判断。 ```bash netstat -an | findstr :8080 ``` 这段命令可以帮助了解是否有任何服务绑定了目标端口。 #### 方法二：更换可用端口为了避免潜在的端口竞争情况发生，可以在启动脚本中指定另一个空闲端口作为替代选项。例如修改 package.json 文件中的 "scripts" 配置项: ```json { "scripts": { "serve": "vue-cli-service serve --port 9090" } } ``` 这样就可以让开发者工具自动切换至不同的 URL 地址进行测试。 #### 方法三：调整安全策略如果是由于防火墙阻挡所致，则需进入系统偏好设置里找到对应的规则集加以放宽权限范围；另外还需注意浏览器插件是否开启了额外保护层而影响到了正常的通信流程。 #### 方法四：修正Axios调用逻辑确保所有的异步操作都遵循 CORS (Cross-Origin Resource Sharing) 协议的规定，必要时可借助于反向代理技术实现跨域资源共享的目的。下面是一个简单的例子展示了如何利用 Nginx 来处理这种情况下的转发需求： ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend_server/; proxy_set_header Host $host; proxy_set_header X-IP $remote_addr; } ... } ``` 以上方法应该有助于缓解大部分由 `localhost` 连接失败所引起的困扰。