手机访问电脑本地项目

1. 首先确保手机和电脑在同一个局域网中（例如连接同一个 WiFi ）
2. 一般情况下手机访问电脑的 ip 地址会被防火墙阻挡，所以在防火墙中添加入站规则：
   
   
   
   

这里我设置项目端口为比较常见的 80 端口，之后按默认设置点击下一步就可以了

启动本地 webpack 打包项目

1. 首先需要安装 webpack-dev-server插件（方便调试以及后期开发），安装、配置及使用方法见GitHub：webpack-dev-server

npm install webpack-dev-server --save-dev

2. 安装完成后，在 cmd中输入ipconfig查看电脑无线网的 ip 地址
   
   在package.json中的"scripts"中添加配置，将复制的 ip 地址（例如 192.xxx.xxx.xxx）加入以下配置中

"scripts": {
    ...
    "dev": "webpack-dev-server --open --port 80 --hot --host 192.xxx.xxx.xxx"
  },

如果不知道webpack-dev-server的设置可以直接复制我的配置或者百度（webpack -dev-server的常用命令参数），这里的**port配置要和之前的防火墙配置的端口一样**。

之后启动项目：

npm run dev

然后就可以打开手机浏览器访问项目了：http:192.xxx.xxx.xxx:端口号

参考文章：https://blog.csdn.net/fly_home_ysc/article/details/49912621