这篇文章主要介绍了 vue-cli 启动的 webpack 项目用 localhost 可以访问, 但是切换到 ip 就不可以访问的原因

问题描述

本地 vue-cli 启动了一个项目只能通过 localhost: 端口号 访问到, 同一局域网下其他的手机和电脑 (包括本机) 并不能通过 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"

参考资料

• webpack Issues: Server can't be accessed via IP #147 (opens new window)
• 【vue-cli】vue-cli+webpack 配置下局域网, 手机无法访问绑定 ip 的 vue 项目 (opens new window)
• vue-cli 启动本地服务局域网不能访问的原因分析 (opens new window)
• 升级到新版的 vue-cli 后只能使用 localhost 访问无法使用 ip 访问 手机访问时只显示 title 不显示内容 (opens new window)
• vue 项目无法使用局域网 IP 访问 (opens new window)