前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue2 dev network:unavailable解决办法

Vue2 dev network:unavailable解决办法

原创
作者头像
逝水经年
修改2022-05-08 18:34:19
3.1K0
修改2022-05-08 18:34:19
举报
文章被收录于专栏:数据可视化数据可视化

一、问题的出现

拉了一个vue2的项目下来,npm run dev时,发现显示network:unavailable,如下图

问题
问题

这个问题在本机访问还好,但是如果要在局域网内访问到就不行了。

二、解决方案

在vue.config.js中配置

public填入本机ip以及需要被访问的端口

代码语言:javascript
复制
devServer: {
  open: true,
    public: 'http://本机在局域网的ip:8080',
      port: 8080,
        https: false,
          proxy: {
            '/third': {
              // 保持默认
              target: 'http://xxx.xxx.xxx.xxx:xxxx/',
                ws: false,
                  secure: false,
                    changOrigin: true, // 允许跨域
                      pathRewrite: {
                        '^/third': '' // 请求的时候使用这个api就可以
                      }
            }
          }
  }

注意:在修改完成后,需要重启一下dev(ctrl+C,输入Y,然后再输入npm run dev

效果
效果

相关资料

1.本机IP如何获取?

Windows下,win键+R,输入cmd,打开命令行窗口,输入ipconfig

代码语言:text
复制
ipconfig

IPV4地址即为本机IP

本机IP
本机IP
2.按照上述步骤配置完成后,局域网内无法访问

可能原因1:检查获取本地IP时选错地址没,因为路由器是DHCP的,本机IP可能会发生改变,发生改变时需要重新配置。

可能原因2:网络没有设置为专用。

把网络设置为专用
把网络设置为专用

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、问题的出现
  • 二、解决方案
    • 在vue.config.js中配置
      • 相关资料
        • 1.本机IP如何获取?
        • 2.按照上述步骤配置完成后,局域网内无法访问
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档