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

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

一、背景描述

前端页面使用的是vue,vue项目启动成功,没有任何报错,服务控制台已出现APP访问地址,如下图所示:

点击访问地址,浏览器打开后页面先是空白,然后过了一会儿显示无法访问此网站,localhost拒绝了我们的连接请求页面,信息如下:

二、问题原因

出现此问题的原因有以下几种:请挨个进行检查:

原因1、项目未成功启动;

原因2、端口被占用;

原因3、Windows功能未启用;

三、解决方案

针对上述三种原因,分别对应三种解决方案:

方案一:重启前端和后端服务

项目未成功启动,则需要查看前端项目为什么没有启动成功,这个原因复杂不再具体说明,可以试着重启服务项目,多重启几次。

方案二:关闭被占用的端口程序,或者换新的其他端口重启服务

最简单的方法便是项目重新换一个新的端口号重启。

或者关闭被占用的端口程序,操作如下:

【WIN + R】打开命令提示符,输入 netstat -aon|findstr “8081”

(此处我查看的端口是8081,注意更换成自己的端口号)

出现如图所示,8081端口被占用,且占用该程序的PID号为143132,接着【Ctrl + Alt + Delete】打开任务管理器,找到PID号为143132的进程,结束该进程,然后再重启服务项目即可。

方案三:启动Windows功能

打开“我的电脑”,选择左上角的“计算机”中的“卸载或更改程序”。点击“启用或关闭Windows功能”。(Windows10版本的位置在,【WIN + I】快捷键打开Windows设置页面,找到<应用–程序和功能>路径下)如下图所示:

点击确定,然后浏览器验证,localhost已经可以访问了!

本文完结!


相关文章
|
2月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
141 56
|
4月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
729 8
|
7月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
121 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
7月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
72 1
|
6月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
260 0
|
7月前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
906 0
|
7月前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
92 0
|
1月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
121 4
|
10天前
|
人工智能 自然语言处理 JavaScript
用 CodeBuddy 搭建Vue框架 像呼吸一样简单
本文介绍如何借助 CodeBuddy 快速创建 Vue 项目。CodeBuddy 是一款支持自然语言编程的工具,能根据用户需求自动生成代码,降低开发门槛。文章详细说明了通过 CodeBuddy 创建 Vue 项目的步骤,包括解决项目创建失败的问题、自动补全代码功能以及启动开发服务器的方法。无论开发者经验如何,CodeBuddy 都能显著提升效率,让开发更专注创意实现。
|
5月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
234 1