vue cli 项目本地服务如何在局域网被访问

近日做项目遇到一个问题,本地使用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


devServer.host为127.0.0.1
devServer.host为0.0.0.0


PS:vue-cli内部是通过webpack来实现的,所以webpack的其他项目如果出现类似问题可以用同样的方法解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。