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

站长

2022年11月20日 20:22 · 阅读数 17

1. 问题

最近在写vue，用yarn、npm启动项目后，发现控制台打印的地址上，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.js的os.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.js的public的值，后面的端口号写定了之后，不会自动递增，多个项目用同一个端口号做配置后，Network打开的是该端口号启动的第一个项目。

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

测试相关


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

参考