近日做项目遇到一个问题,本地使用vue-cli起的一个项目无法在内网中被其他同事访问到。对于这点我就很困惑,按理vue-cli起的服务和一般的本地服务没有什么区别不应该存在。
经过一系列排查后,发现是有同事将vue.config.js中的devServer.host配成了127.0.0.1,这种配置在本机使用的时候没有任何问题,但是在局域网访问的时候就会出现问题;原因是webpack-dev-server会使用host的值来启动服务,写死127.0.0.1的话就会导致局域网也需要通过这个IP来访问,但是这个IP会优先指向本机。
解决方案也很简单,只需要把devServer.host改为0.0.0.0即可,webpack会自动匹配你本机的IP;另外我们还可以通过输出的App running at来确认,其中Network就是局域网内部访问的IP
PS:vue-cli内部是通过webpack来实现的,所以webpack的其他项目如果出现类似问题可以用同样的方法解决