解决vue项目启动network：unavailable问题

最新推荐文章于 2025-03-23 20:47:56 发布

自由奔向大海

最新推荐文章于 2025-03-23 20:47:56 发布

阅读量1.1k

点赞数 3

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_52469835/article/details/144829140

版权

// 期望的结果：
  
App running at:
- Local:   http://localhost:9528/ 
- Network: http://x.x.x.x:9528/


// 实际结果:
App running at:
- Local:   http://localhost:9528/ 
- Network: unavailable

其他各位大佬已经指出这样的问题，可能有三种情况，如果你三种情况都已经排查但是还是没有解决，请往下浏览，如果这三种情况已解决你的问题，本文章可以忽略！！

三种情况：

多个网卡原因，打开网络共享中心，把多余的网络禁用掉，只留一个
在项目中配置host及publilc
系统环境变量问题

如果你的电脑是win11最新系统，要注意这个消息，微软宣布禁用 WMIC 并将在 Windows 11 的下一个版本中彻底移除它。如果您升级到了 Windows 11，将无法再使用 WMIC 来执行各种管理任务。

WMIC 大家可以自行查阅信息：这里简单理解就是：用于执行各种系统管理任务和查询系统信息

直接上解决方法：

【系统设置】-【可选功能】-【添加可选功能】-【搜素wmic下载】-【齐活完事】

最后别忘记重启项目验证

如果有错误或者其他问题欢迎大家评论交流~~

‌‌

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自由奔向大海

关注关注

3
点赞
踩
7

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

启动vue项目的时候遇到报错信息：Error: spawn cmd ENOENT

猿小白的博客

07-31

1512

使用npm run dev 运行vue项目的时候遇到了这个报错信息。throw er;npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!

node运行项目-Network: unavailable-没有ip地址

JackieDYH的博客

08-22

5751

vscode运行vue项目后发现Network: unavailable 是什么情况呢？可能有一下三种情况：1.多个网卡原因：打开网络共享中心，把多余的网络禁用掉，只留一个2.在中配置host及public3.系统环境变量问题。

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

vue运行项目时local有显示但是network却显示unavailable

旭久的博客

12-12

1912

日常开发中和后端本地调试时后端需要使用你的本地去访问页面可运行项目时会出现network显示unavailable的情况。

vue项目启动network：unavailable问题

qq_59968619的博客

02-05

182

电脑添加上：

WIN11-24H2版本后Vue项目network:unavailable问题

热门推荐

weixin_46443403的博客

03-05

1万+

vue项目运行

vue项目启动- Network: unavailable 问题

weixin_50261167的博客

09-02

1245

Network: unavailable，不一定是缺少环境变量导致的，还有可能是少了这几行代码，不妨试一下，看能不能解决你的问题。

vue运行项目时network：unavailble的解决方法

m0_65069237的博客

12-15

2357

因为WBEM是管理协议和网络标准技术的一项业界倡议，这个程序对系统的正常运行是非常重要的，所以不能删，必须保存环境变量中，删了就会导致系统网络的一些问题，其中network：unavailable的出现就是问题之一。

Vue---vue项目中启动后报错Network: unavailable的解决办法

COCOLI_BK的博客

01-05

3412

在vue项目根目录下找到或创建 vue.config.js 文件，在devServer配置里面添加public。vue项目run命令后，只有localhost访问，network不能访问，启动后不显示对应的IP地址。如下代码所示： public:‘192.168.1.2:8080’3. 之后完美运行！

vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）

WWF_HelloWorld

11-12

1598

【代码】vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）

vue项目运行遇到Network: unavailable的情况，怎么解决

qq_43436008的博客

10-18

3638

问题1：vue项目运行遇到Network: unavailable的情况，怎么解决解决方案1： 1）在vue.config.js中加上被选中的部分 2）重新运行项目即可

vue项目运行后Network: unavailable解决方法

u013437812的博客

02-21

3250

项目场景：解决方案：在vue.config.js文件中加入以下一行代码 module.exports = { devServer:{ port, //端口号就是自己设置的值 public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':' + port //设置访问ip端口 } } ...

vue Network: unavailable

03-22

### Vue 中解决 Network Error 的方法在网络请求过程中，`Network Error` 通常表示由于某些原因导致请求未能到达目标服务器。这可能是由 CORS 问题、DNS 解析失败、网络中断或其他因素引起的。以下是针对 `Vue.js` 应用程序中可能出现的 `network error` 提供的一些解决方案： #### 1. **检查跨域资源共享（CORS）** 如果前端应用和后端 API 部署在不同的域名下，则可能会触发浏览器的安全策略——同源策略。此时需要确认后端是否允许来自前端的跨域访问[^1]。可以通过以下方式配置后端支持 CORS 请求： ```javascript // 如果使用 Express 框架作为后端服务 const cors = require('cors'); app.use(cors()); ``` #### 2. **验证代理设置** 当开发环境下的前后端分离部署时，建议通过 Vue CLI 的内置代理功能解决问题。可以在项目的 `vue.config.js` 文件中定义代理规则： ```javascript module.exports = { devServer: { proxy: 'http://localhost:5000' // 将所有 /api 路径转发至指定地址 } }; ``` 此操作会将所有的 `/api/*` 请求自动映射到本地运行的服务上，从而规避直接调用外部接口可能引发的 CORS 错误[^3]。 #### 3. **捕获并处理 Axios 报错** 对于基于 Axios 实现 HTTP 客户端的应用来说，应该合理地捕捉异常情况，并给出友好的提示信息给用户。 ```javascript axios.get('/user/1') .then(response => console.log(response.data)) .catch(error => { if (!error.response) { alert("Please check your internet connection or server status."); } else { switch (error.response.status){ case 404: alert("Resource not found."); break; default: alert(`An unexpected error occurred (${error.response.statusText})`); } } }); ``` 上述代码片段展示了如何区分无响应错误和其他类型的 HTTP 状态码错误。 #### 4. **确保 DNS 和 URL 正确性** 有时简单的拼写失误也会造成严重的后果。务必仔细核对接口路径以及主机名书写是否有偏差；另外还要留意 HTTPS 协议强制启用的情况下证书有效性等问题。 --- ### 总结以上是从多个角度出发探讨了解决 Vue.js 开发过程里遇到 “Network Error” 这类常见难题的办法。实际项目调试期间还需要结合具体情况分析根本原因所在。