这篇文章主要介绍了 vue-cli 启动的 webpack 项目用 localhost 可以访问, 但是切换到 ip 就不可以访问的原因
问题描述
本地 vue-cli 启动了一个项目只能通过 localhost: 端口号 访问到, 同一局域网下其他的手机和电脑 (包括本机) 并不能通过 ip 地址访问调试
原因
关于这个问题, 其实是因为新版 webpack 导致的, 因为我们使用 vue-cli 来构建项目的时候, 一般都会选择使用的模版是 webpack .
这次 webpack 升级后, 导致 /config/index.js 里面的配置项多了几项.
其中一项就是 dev 中多了:
1 | 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"
