vue本地项目实现局域网访问
首先需要在同一个网络中,才能进行互相访问
记得先关闭防火墙(若是需要长时间关闭防火墙觉得不安全请参考这篇博客)
-
首先需要找到config下的index.js文件,更改访问的host地址,将其改为
host: '0.0.0.0'
这样就已经能通过ip地址和localhost访问了,但是会发现启动后他是这个样子
-
这时就需要设置启动后终端显示localhost和network访问地址
找到build文件夹的webpack.dev.conf.js文件
找到其中的compilationSuccessInfo里的messages,如下图,在其中添加:
`Local: http://localhost:${port}`,
`Network: http://${require('ip').address()}:${port}`,
- 这时再重新启动项目,启动后终端既可以显示localhost和network访问地址,之后就可以通过ip地址(注意这里获取到的是以太网的ip)+端口号来访问项目了
- 在配置后我出现了network访问地址和当前ipv4地址不同的情况,导致远程访问出现问题。之后我查了它获取到的ip和自己电脑的网络配置,发现他获取的是以太网 2的ipv4地址
然后打开网络适配器,发现以太网 2是virtualBox虚拟机的一个虚拟网卡,将其禁用就可以正确获取到自己网络的ip
- 获取WLAN地址的方法