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

这篇文章主要介绍了 vue-cli 启动本地服务，局域网下访问不到的原因分析, 在文中还给大家介绍了 vue-cli 起的 webpack 项目用 localhost 可以访问，但是切换到 ip 就不可以访问的原因，本文给大家介绍的非常详细，需要的朋友参考下

问题描述

本地 vue-cli 启动了一个项目只能通过 localhost:8080 访问到，同一局域网下其他的手机和电脑 (包括本机) 并不能通过 ip 地址访问调试

关于这个问题，其实是因为新版 webpack 导致的，因为我们使用 vue-cli 来构建项目的时候，一般都会选择使用的模版是 webpack 。

这次 webpack 升级后，导致 /config/index.js 里面的配置项多了几项。

其中一项就是 dev 中多了：

host: 'locahost', // can be overwritten by process.env.HOST

配置文件中默认生成的是本地调试模式，默认访问地址是 localhost: 端口号

这个配置项有一个好处，就是局域网内的其他设备，无法访问你的开发项目。（或许你也不想让别人看到）。

但现在，我想用局域网内其他设备来访问怎么办？

找到 config 文件夹下的 index.js 文件, 修改 host:"localhost" 为 host:"0.0.0.0" 或 host: 本机 ip, 此时同一局域网下的手机和其他电脑能通过 ip 查看到页面

在 package.json 中修改 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --port 8080 --host 本机 ip 或 0.0.0.0"