likes
comments
collection

【Vue】关于项目启动后控制台的Network的值为unavailable

作者站长头像
站长
· 阅读数 12

1. 问题

最近在写vue,用yarnnpm启动项目后,发现控制台打印的地址上,Network地址是unavailable

yarn serve // 启动项目

【Vue】关于项目启动后控制台的Network的值为unavailable

2. 解决方案

查了相关资料后,找到了一个解决方案。 在项目的根目录上新建vue.config.js文件,配置以下信息,并重启项目。

module.exports = {
  devServer: {
    public: 'http://192.168.0.145:8080' // 你自己本地的ip地址:端口号
  }
}

【Vue】关于项目启动后控制台的Network的值为unavailable 可以看到配置了以后是有Network了。

3. 解决方案2

但一想,还要自己先去获取本地的ip地址再配置,能不能自动获取呢?

接着查到自动获取本地ip地址的方法,Node.jsos.networkInterfaces()可以获取本地的网络信息。

module.exports = {
  devServer: {
    public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':8080'
  }
}

【Vue】关于项目启动后控制台的Network的值为unavailable 获取成功。

4. 其他

然后我想,去掉这个配置,直接用网络地址能否访问。

【Vue】关于项目启动后控制台的Network的值为unavailable 貌似是可以访问,但是打开控制台后,

【Vue】关于项目启动后控制台的Network的值为unavailable 产生了跨域问题,加上配置后就没有这个问题了。(所以还是加上吧……)

另外,vue.config.jspublic的值,后面的端口号写定了之后,不会自动递增,多个项目用同一个端口号做配置后,Network打开的是该端口号启动的第一个项目。

然后试了试的vue2版本,控制台也是没有Network

测试相关

编辑器VS Code、WebStorm
vue版本v3.0.0、v2.6.14
node版本v16.13.2

参考

  1. Vue项目 Network: Unavailable的解决办法
  2. 关于vue3运行之后Network: unavailable问题
  3. os.networkInterfaces()
  4. Node.js os.networkInterfaces()用法及代码示例