记录---------关于vue-cli启动本地服务局域网不能访问的原因分析

2,487 阅读1分钟

记录---------关于vue-cli启动本地服务局域网不能访问的原因

在创建的vue项目中 使用npm run serve启动项目时候 会出现2个链接地址 一个是本地访问的 一个是局域网访问

项目正在就是我启动后项目的链接地址,Local是可以启动 但是Network局域网不能访问却不能访问,因为我需要在手机上测试查看 起初我以为是代理的原因,将电脑的代理给关掉了,发现还是不行

    Local:   http://localhost:8082/ 
  - Network: http://localhost:8082/ 

为什么:vue-cli项目是通过命令行一键生成的,配置文件中默认生成的是本地调试模式,默认访问地址是localhost:端口号

解决方法

我这里的vue.config.js是直接创建的文件,修改host:“localhost”为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过Network查看到页面 有些创建的要在config 文件夹下的找 index.js 文件

因为我之前解决在vue.config.js里面解决过跨域问题 代码就是下面的

WeChat5f6e01a50ebe73f3a902679f49834b28.png

修改host:“localhost”为 host:"0.0.0.0" 然后重新启动 就变成下面这种 就可以访问了

image.png