NodeJs本地搭建服务器，供手机访问电脑静态HTML文件

前端

不知道你在项目开发过程中，有没有遇到过有过以下场景：
一般是做移动Web项目时，都是制作好静态页面，通过浏览器模拟手机的窗口大小进行测试。然而项目正式上线后，在某个手机设备上出现排版错位或其他问题，但是通过浏览器模拟手机显示却是比较正常，无法把出问题还原。此时，我们要修复此类的样式问题过程就是：修改样式 –>> 上传更新 –>> 问题依旧 –>> 修改样式 –>> 上传更新 …… 陷入无休止的重复循环。

如果能够手机直接访问电脑本地的静态HTML文件，我们就可以本地修改，即刻手机查看效果，这样就能够避免很多重复性的工作了，以下我们就通过 nodejs 实现。


1、安装 nodejs
在 nodejs（https://nodejs.org） 官网选择对应的nodejs进行安装。

2、安装 Express
打开系统的运行目录窗口，输入以下命令

1
npm install -g express-generator@4

安装Express

3、通过cmd命令窗口，进入要创建项目的位置
此实例我们选择在G盘根目录创建项目
进入要创建项目的位置

4、创建一个工程。输入以下命令

1
express mobile

创建一个工程

现在在G盘就多了一个mobile的项目

5、安装依赖。进入mobile项目目录，然后安装依赖。

1
2
cd mobile
npm install

安装依赖

6、开启服务器

1
npm start

7、在浏览器输入一下地址，就可以访问项目了

1
http://localhost:3000

8、打开mobile项目的 app.js 文件，找到一下语句并注释它。

1
app.use(express.static(path.join(__dirname, 'public')));

9、接着，在项目的public文件夹下，新建一个project文件，然后新建index.html，内容如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
    Hello world.
</body>
</html>

10、这样在浏览器中输入一下地址，就可以访问该HTML文件了。

1
http://localhost:3000/project/index.html

访问项目

11、打开系统命令输入窗口，输入 ipconfig ，找到本机的 IP 地址。
本机的IP地址

11、把原来访问地址的 localhost 更换成 本机的 IP 地址后，就可以通过手机访问到电脑的手机文件
手机访问

附：如果3000端口发生冲突，可以通过一下方法修改。
1、打开项目bin文件夹的www文件，找到对应的端口代码修改。
端口修改

2、重新进入mobile项目，输入以下命令，重启nodejs服务器

1
npm start

端口修改

这样修改的端口就可以成功使用了。