2021-07-05

移动端项目本地真机调试页面

方法一： 修改项目host地址

先查询本地ip, windows系统：在cmd命令行输入 ‘ipconfig’；macos系统：终端输入 ifconfig | grep “inet” ，然后查看inet 那一行

然后，将手机和电脑连同一个网络，电脑关闭防火墙。
项目中 config/index.js 文件中，将host改为自己的ip地址，然后重启项目，手机浏览器上输入ip+端口地址(例如：192.168.43.247:8080)就可以打开页面了。

方法二： 不修改项目host地址

host值仍然是 ‘localhost’, 手机和电脑连同一个网络，电脑关闭防火墙，然后将页面地址生成二维码，在手机上用浏览器扫码进入页面即可。

方法三： 用node.js实现移动端访问页面

1. 安装node ；
2. npm install -g browser-sync 全局安装；
3. 在运行的项目目录下，执行browser-sync start --server --files "css/*.css, *.html"

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果文件层级比较深，您可以使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

4. 打开浏览器后，将localhost换成ip地址 然后在手机浏览器中输入整个url就可以访问了 ¹

---

1. 可以执行 browser-sync start --proxy "localhost:8080" "**/*.css, **/*.html" 使localhost与项目的localhost统一 ↩︎