前端开发利器之静态服务器

在进行前端页面开发时,为了调试方便,需要在本地启动一个静态文件服务器,而不需要与后端api服务一起部署。

常用静态文件服务器

01. anywhere

使用简单,需要nodejs环境。
安装:npm install anywhere -g
使用:anywhere --help
在任何需要访问静态文件的地方,直接运行即可访问:anywhere -p 8080
详见:https://www.npmjs.com/package/anywhere

02. http-server

使用简单,需要nodejs环境。
安装:npm install http-server -g
使用:http-server [path] [options]
在任何需要访问静态文件的地方,直接运行即可访问:http-server -p 8080
详见:https://www.npmjs.com/package/http-server

03. python http.server模块

这是python自带的模块,使用简单,需要安装python环境。
以python-3.6.3为例,直接在windows上运行安装文件python-3.6.3.exe,安装成功之后可以启动访问:python -m http.server 8080
详见:https://docs.python.org/3/library/http.server.html

04. nginx

下载地址:https://nginx.org/en/download.html
nginx是常用的静态文件服务器,同样可以用来在开发调试时使用。
以使用windows版本的nginx为例,下载相应windows压缩包,解压到指定目录即可。

简单编辑nginx.conf:

server {
        listen       80;
        server_name  localhost;

        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
}

启动:start nginx.exe,可以访问nginx/html目录下的所有静态文件。
如果不想做过多配置,那么需要将静态文件放在nginx/html目录下。
当然,也可以修改nginx配置文件访问指定目录下的静态文件。
详见:https://nginx.org/en/docs/beginners_guide.html#static;

https://www.cnblogs.com/h9527/p/5530298.html

转自:http://www.cnblogs.com/nuccch/

原文地址:https://www.cnblogs.com/xuepei/p/8252907.html

时间: 2024-10-17 02:01:22

前端开发利器之静态服务器的相关文章

前端开发利器 Sublime Text 3 使用技巧和总结笔记

这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 为测试阶段,建议下载正式版  注册机SublimeTextKeygen下载 打开注册机,先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认,再随意修改下 “Name” 然后 “G

前端开发利器 livereload -- 从此告别浏览器F5键

各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷新也能实时预览新代码构建的页面. 软件准备:1.新版的sublime text(sublime text 2 无法下载livereload插件) 下载地址 https://www.sublimetext.com/3 新版本安装配置说明 https://www.douban.com/note/474507021

前端开发利器-Brackets IDE

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具

web前端开发利器——基于ruby的sass,compass和Dreamever+emmet插件

引言:web前端的html页面和css文件有时写起来会很麻烦,但是借助一些工具能够帮助我们轻松的构建相应的页面.sass是css的一款开发工具,有相应的语法,可以有逻辑和简洁编写css代码.本文介绍的主要是基于Dreamever cs5加上emmet插件快速编写简洁html页. 1. ruby安装与配置 ruby可以从百度搜索中的百度软件安装中心找到或者官网下载.安装很简单,以.exe文件进行安装,直接进行下一步安装就行.安装完成之后,在命令行窗口中输入 ruby -v,如果显示了相应的版本说明

前端开发利器webStorm /phpStorm

合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”.编辑类软件层出不群,各有所长,各有所短.找到一个合适的还真是难.还好有webstorm的出现,最近又是3.0的新版本发布.为什么这么说呢,她与其它的编辑器有什么不同:1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的. 换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储.

前端开发利器webStorm 3.0配置使用

合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”.编辑类软件层出不群,各有所长,各有所短.找到一个合适的还真是难.还好有webstorm的出现,最近又是3.0的新版本发布.为什么这么说呢,她与其它的编辑器有什么不同:1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的. 换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储.

微信开发系列——微信订阅号前端开发利器:WeUI

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找

前端开发利器CSS之完美容颜

请先掌握HTML知识!!!!详见:HTML之常用标签整理 四.CSS开始 1.认识CSS样式 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等 2.CSS样式的优势 用<span></span>括起来,统一设置css样式 3.CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成 p{color:blue}(选择符{属性  声明  值}) 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(

Less入门到上手——前端开发利器

摘录less官网的解释: LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语言.环境中使用,包括浏览器端.桌面客户端.服务端. 以上是less官方解释,说下本菜的理解:less类似css的jquery,一个为css封装的库. less最终还是被编译成css被读取. 1.less定义变量: /*声明变量*/ @var_width:120px; /*使