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