前端快速创建本地服务器

搭建本地服务器，是为了在同一个局域网下可以通过ip访问到本地网址。
在前端项目中搭建本地服务器可以实现局域网内个多个设备(手机和电脑)运行同一个地址就可以看到效果。

一、node的http-server

1.安装node

• 官网下载：https://nodejs.org/en/
• 安装结束后，打开命令行工具，输入命令node -v检测node是否安装成功，安装成功，会显示版本信息
• 输入npm -v检测npm安装是否成功

2.安装http-server模块

• 在命令行里操作，cd命令进入你的一个项目文件，比如app文件夹是你的项目文件夹，cd app
• 输入命令npm install http-server -g全局安装模块

3.开启服务器

• 在命令行中输入http-server，本地服务器就开启了，默认端口是8080，在浏览器中输入localhost:8080就可以使用了。

二、anywhere

1.安装node

• 官网下载：https://nodejs.org/en/
• 安装结束后，打开命令行工具，输入命令node -v检测node是否安装成功，安装成功，会显示版本信息
• 输入npm -v检测npm安装是否成功

2.安装anywhere

• 输入命令行npm install anywhere -g全局安装模块

3.开启服务器

• 找到要启动本地服务器的静态文件夹，执行命令：anywhere 它就会自动弹出你的项目页面，浏览器运行 https://X.X.X.X:8000/或http://localhost:8000/

三、VS Code中的live server

1.安装node

• 官网下载：https://nodejs.org/en/
• 安装结束后，打开命令行工具，输入命令node -v检测node是否安装成功，安装成功，会显示版本信息
• 输入npm -v检测npm安装是否成功

2.安装live-server

• 如果使用的是vscode编辑器，直接安装live serve插件即可
• 或者通过命令npm install live-server -g全局安装模块

3.开启服务器

• vscode编辑器的右下角有Go live按钮，点击自动启动本地服务器
• 或者进入项目文件中，在终端执行live-server命令

总结

• http-server、anywhere、Live Server插件 都是针对项目目录起作用。第三方设备使用【IP:端口】作为URL访问时，能查看到此项目目录下所有文件信息。

• 当项目目录下有名为index.html文件时，第三方设备使用【IP:端口】进行访问时，能直接查看到index.html渲染出来的页面。