Vue 程序使用host 0.0.0.0 实现监听本机所有可用的网络接口

查看电脑网络接口（相关链接：https://blog.csdn.net/qq_59062726/article/details/152925323?fromshare=blogdetail&sharetype=blogdetail&sharerId=152925323&sharerefer=PC&sharesource=qq_59062726&sharefrom=from_linkhttps://blog.csdn.net/qq_59062726/article/details/152925323?fromshare=blogdetail&sharetype=blogdetail&sharerId=152925323&sharerefer=PC&sharesource=qq_59062726&sharefrom=from_link）：

 由上到下：

192.168.238.1（虚拟机1）192.168.111.1（虚拟机2） 192.168.137.233（WIFI ）

上方三个IP是我电脑可使用的网络IP。

指定IP地址运行Vue

1.使用WIFI IP

Vue项目执行以下构建命令：

npm run serve -- --host 192.168.137.233 --port 8080 

配置：

devServer: {port: 6688,proxy: {'/api': {target: 'https://localhost:5656', // 确保是 httpschangeOrigin: true,secure: false, // 重要：允许自签名证书logLevel: 'debug', // 添加日志查看代理情况onProxyReq(proxyReq, req, res) {console.log('代理请求:', req.originalUrl, '->', proxyReq.path);}}}}

输出：

 App running at:- Local:   http://192.168.137.233:8080/- Network: http://192.168.137.233:8080/

监听端口状态：

表示这个前端程序的IP地址是192.168.137.233，监听着8080端口。

在电脑访问：http://192.168.137.233:8080/

可以成功访问到Vue 网站：

ps:如果手机也连接了这个WIFI，相当于手机和电脑在同一局域网内，手机也可以通过这个网址： http://192.168.137.233:8080/   访问到网站。

换做localhost:

换其他的网络接口，：

2.使用虚拟机地址

配置不变，执行：

npm run serve -- --host 192.168.238.1 --port 8080 

监听端口状态：

使用对应IP访问：

更换wifi IP访问：

使用localhost访问：

类似使用wifi IP地址效果。

使用host 0.0.0.0运行

执行以下构建命令：

npm run serve -- --host 0.0.0.0

配置不变：
 

devServer: {port: 6688,proxy: {'/api': {target: 'https://localhost:5656', // 确保是 httpschangeOrigin: true,secure: false, // 重要：允许自签名证书logLevel: 'debug', // 添加日志查看代理情况onProxyReq(proxyReq, req, res) {console.log('代理请求:', req.originalUrl, '->', proxyReq.path);}}}}

 监听端口状态：

可以看出：自身不指定IP 和端口，使用本地环回地址，监听配置的port。

输出：

App running at:- Local:   http://localhost:6688/- Network: unavailable

在电脑访问localhost:

使用WIFI IP访问：http://192.168.137.233:6688/

使用虚拟机IP访问

另外一个虚拟机：

 

都可以成功访问到Vue 网站。