windows下三种web服务器搭建方式

1、第一种方法（live-server）

一、安装方法：

Npm安装: npm install -g live-server（前提是先安装node.js）

而后在所在项目目录下，打开命令行工具，输入 live-server，回车就能够了（注意这里默认打开的是index.html）。默认地址：127.0.0.1:8080

指定端口：live-server --port 9000

Vscode软件里面安装：在扩展里面搜索Live Server插件，而后安装好，打开项目，在右下角有个go live按钮，点击就能够打开此项目的发布地址，默认地址是127.0.0.1:5500

指定端口：打开vscode的设置文件settings.json，而后设置"liveServer.settings.port":5501（liveServer.settings.proxy能够设置代理）

二、live server的优缺点：

优势：实时更新，热更新。

缺点：由于是热更新，因此不稳定，很容易网页就本身刷新。

因此适合调试的时候用这个发布。演示的时候就最好不用这个。

2、 第二种方法（IIS服务器）

一、安装方法：

打开window的控制面板，打开程序与功能下面的打开或关闭windows功能，勾选以下图红色选框内的内容。（不一样的windows版本可能有差别，个人系统是win7专业版）

而后关闭windows防火墙（否则只有你本身能够访问你发布的程序，别人没法访问）。

配置好以后，须要重启计算机才能生效。

二、发布：

在管理工具里面打开IIS管理器，而后点击添加网站。在添加网站对话框中，输入网站名称，选择物理路径和端口，其余默认，而后肯定物理路径，选择存放发布后的文件系统的文件夹，端口选择除 80 之外的端口

默认打开文件是index.html，能够本身设置。

3、 第三种方法（nginx服务器）

一、下载nginx的安装包：

下载地址：nginx.org/en/download…，点击stable version即稳定版本进行下载了再解压便可。

二、Nginx网站的配置：

先把须要发布的网站目录拷贝到nginx文件夹下面的html文件夹里面。而后再进入conf文件夹打开nginx.conf文件进行配置，配置内容以下：

server {

listen 8180;

server_name localhost;

location /{

root html/share;

index index.html index.htm;

}

}

PS：有一个须要注意的点是nginx的默认端口80不能被占用了，若是被占用了，就把配置里面的端口改了或者把之前的发布的80端口的改为其余端口

三、Nginx的启动：

能够直接点击nginx解压包里面的nginx.exe程序，也能够在nginx的目录下打开命令窗口（在当前目录下打开命令窗口，能够在按住shift键的前提下再点击右键菜单，第三个就是在此处打开命令窗口），运行nginx命令启动nginx。

当修改了nginx.conf的配置的时候，须要重启nginx，命令是

nginx –s reload