前端开发人员快速搭建本地服务器的3种方法(针对项目目录)

carousel_map> http-server

如图:

图片[1]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

3)在手机浏览器中打开网站,index.html所在根目录,会显示index.html的内容

http://192.168.0.103:8080/carousel_css_transition

示意图如下:

注:手机浏览器中URL实际完整路径为:192.168.0.103:8080/carousel_css_transition

图片[2]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

注:若项目根目录下无index.html文件,则只会显示文件目录,可点击其他html文件进行打开网站,亦可在URL中输入完整的html路径访问,如:

192.168.0.103:8080/bubbles.html

另外,对于react开发的项目,npm start运行项目之后,也可在手机中输入以下URL访问网站

http://192.168.0.103:3000

二、anywhere

1.安装node

2.安装好了,我们打开cmd,输入命令行1:node -v, 这里是查询node版本,出现版本号说明安装成功。

3.输入命令行npm install anywhere -g 这里是全局变量

4.找到要启动本地服务器的静态文件夹,执行命令:anywhere它就会自动弹出你的项目页面

图片[3]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

5.浏览器运行:8000/ 或:8000/

图片[4]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

6.再找到相应的文件进行打开

图片[5]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

图片[6]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

ps:同一wifi两台电脑和手机亲测有效!(图书馆wifi不行)

三、VS Code的Live Server插件

前端使用vscode编辑器,安装live serve插件

然后在vscode编辑器的右下角有 Go live 按钮,点击自动启动本地服务器

图片[7]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

图片[8]-前端开发人员快速搭建本地服务器的3种方法(针对项目目录)-JieYingAI捷鹰AI

ps:同一wifi两台电脑和手机亲测有效!(图书馆wifi不行)

总结

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容