纯静态页面如何快速搭建http web服务器

分类:其他来源:站内 最近更新:2020-09-17 14:12:04浏览:115留言:0

直接先上解决方案:

一名前端电脑肯定装了node,如果npm5.2 以上版本都支撑npx, 所以推荐两个插件

serve

npx serve    #直接在项目目录下,运行命令,就可以启动一个web服务了


http-server

npx http-server   #直接在项目目录下


扩展

如果你有时间可以继续往下看:

部分小伙伴写习惯了单页面的项目,就不知道如何快速运行起来一个纯静态,或者简单的与后端交互的web服务器了。

如果运行的是一个简单的纯静态html文件,大家肯定认为双击打开就行啦。是的,这个是最快的打开和调试方式。

但是如果主管说,你把连接分享出来,大家预览一下,怎么搞?

当然也有方法,把文件夹共享出来,局域网里查看文件。额……也能搞定。

如果公司防火墙要求严格,局域网内禁止共享类似.js后缀的文件,那还能怎么搞……

懵逼中……

双击打开的文件,可以看到URL(统一资源定位符,英语Uniform Resource Locator的缩写)的协议为file:// 协议(本地文件传输协议),这个协议就好比通过Windows的资源管理器中打开文件或者通过右键单击‘打开’一样。

所以有些代码就会报错,尤其是ES6资源请求的方法。而且file协议没办法跨域请求。


我们要搭建http协议的web服务器

常见的web服务器有:

window自带:IIS

虚拟主机:Kangle

java开发经常用的服务:Tomcat ,WebSphere

PHP开发 :Apache

运维:Nginx

简单方且功能强大的,自带了很多服务器的

phpstudy

https://www.xp.cn/wenda/401.html


phpwamp

http://www.phpwamp.com/


如果是一个前端,搞那些太复杂,我们用自己的知识如何快速运行一个服务器

两款node 扩展插件:

serve 

最快的方式可以直接用 npx serve ,如果运行觉得慢,可以直接全局安装到本地 npm i serve -g ,然后直接在目录下 serve 

缺点:会省略.html会后缀,而且会省略index.html。这样导致有时候访问xxx/xxx/index.html 直接访问xxx/xxx不能正确找到路径的问题


http-server

同server一样,直接运行 http-server 

优点:可以处理简单的跨域请求,比如请求后端接口可以用  http-server  -P http://xxxx(后端的地址)

缺点:http-server  -P 后端地址  它的逻辑是,运行的web页面找不到时就去后端地址找资源,所以复杂的地址重写能力不具备


不过,简单项目,上面两个插件已经基本满足了。

如果再复杂一点的,

webpack-dev-server 服务走一波

搭建了一个简单的DEMO,方便后期直接使用。

https://github.com/gucb/static_web_serve


0

发表评论

评论列表(0)

  • 暂时没有留言