使用node搭建服务器（wifi连接查看vue项目）

一、使用wifi连接node平台搭建的服务器，进行vue项目查看的步骤

最近新学了node搭建服务器，步骤比较多，怕忘记了，按操作顺序记录下来供参考
1.首先找到vue项目的文件夹，在上方输入“cmd”命令

2.输入“npm run build”命令进行打包
（用vue脚手架生成的项目，直接这么写，不然要去package.json里配置快捷键）

3.打包完成，生成了dist文件夹

4.复制这三个文件夹
data文件夹：我放的是项目需要用的json、images；
dist文件夹：打包生成的文件夹；
index.html：项目主页

5.在桌面新建一个文件夹（随便建哪里，新建一个就好了）

6.双击打开新文件夹，输入“cmd”命令

7.进入cmd界面
①输入“npm init -y”初始化；
②输入“cnpm/npm i express -S”，下载express包
【可以用cnpm或者npm，cnpm下载速度比较快，不过用cnpm要提前安装，cnpm安装教程网址：https://www.cnblogs.com/liyuspace/p/10338570.html；-S是为了写依赖】

8.demo文件夹–>新建www文件夹–>新建 名为 “xxx” 的文件夹–>粘贴文件
①在“demo”文件夹下，新建“www”文件夹；
②然后在“www”文件夹下，再新建一个“xxx”文件夹（自己取名字）;
③将刚才复制的文件（data、dist、index.html），粘贴在“xxx”文件夹（第二步建的）里面

9.回到demo文件夹目录下，新建“readfile.js”文件
（特别注意：readfile.js和www、node_modules文件夹同级）

10.在刚才的readfile.js里写以下内容：

const express=require('express');
const app=express();

app.use('/',express.static('./www/whuiry'))
app.listen('8989','192.168.1.107');

或者，也可以用第二种 app.use 填写方式

const express=require('express');
const app=express();


app.use('/whuiry',express.static('./www/whuiry'))
app.listen('8989','192.168.1.107');

【不知道IP地址的话，win+R–>输入“cmd”–>ipconfig–>查看下面的IPv4地址】
11.返回demo目录下，在上方输入cmd命令

12.输入“node readfile.js”，运行服务器

13.可以先在电脑浏览器看一下服务器有没有开好
打开浏览器，输入“http://192.168.1.107:8989”【http://IP地址:端口号】，回车进入

如果电脑连接的是网线：可以用电脑开热点，然后手机连接电脑wifi；
如果电脑连接的是wifi：那么直接用手机连接这个wifi**

14.在手机上，复制“http://192.168.1.107:8989”（自己）网址，打开浏览器运行

15.就可以在手机上查看自己做的vue项目啦

二、如果 页面加载失败 或者 服务器拒绝访问

可能是因为防火墙原因导致失败的，可以尝试关闭防火墙再试试

1.在电脑右下方点击盾牌图标

2.点击“防火墙和网络保护”

3.点击“允许应用通过防火墙”

4.点击“系统和安全”

5.点击“检查防火墙状态”

6.点击“启用或关闭Windows Defender防火墙”

7.选择关闭

8.选择完成后，点击确定，即可关闭

9.在手机上刷新重试