前端啟動本地服務的四種方法，看完不會你錘我

前邊幾篇文章介紹本地緩存，還有 WebSocket 等好多需要在服務內才能運行，上一篇介紹移動端適配，更是需要在手機端訪問頁面，此時就不得不介紹下如何在本地啟動服務，及手機如何訪問？

一、為什么需要本地服務？

調試移動端網頁調試方法：

• PC端瀏覽器的開發者模式中，選擇手機模式。
• 利用手機模擬器。
• 使用真機訪問本地。

上述三種方法中，比如頁面的內容展示，點擊、滑動等效果可以測試，但是如果有多點觸摸的縮放、旋轉時，必須要真機操作。所以我們需要搭建一個本地服務，本地局域網內，允許手機訪問本地網頁。

二、啟動本地服務的方法

2.1、Node.js

使用Node.js搭建服務，本地需先安裝Node.js。

官網地址：https://nodejs.org

1：node 內置模塊 http，使用createServer創建服務，創建serve.js代碼如下：

var http = require('http') http.createServer(function(req, res){ res.writeHead(200, { 'Content-Type': 'text-plain' }); res.end('Hello World'); }).listen(8083); //8083是服務端口號，可以任意設置

2：運行時，執行：

node serve.js 或 node serve

3：啟動成功之后，訪問文件，訪問有三種方法：

• localhost 或 http://127.0.0.1/ - 每個服務都會有一個端口號，nginx默認的端口號是80，訪問的時候不填寫端口號，默認也是80。如果想換一個端口號，可以修改 Nginx -> conf -> nginx.conf 配置文件，找到 80 替換成你想要的，訪問的時候就用下一種方法。
• localhost:80 或 http://127.0.0.1:80/ - 添加服務的端口號。
• http://192.168.124.11/ 或 http://192.168.124.11:80 - 使用的是本機局域網的ip訪問。如果不知道自己電腦ip可以使用ipconfig查看。

移動端訪問的時候，需要使用第三種方法進行訪問，如果訪問的不是index.html，是中文的文件時，手機不能直接使用ip+中文名的方法，需要在電腦上復制下路徑，中文亂碼以后的地址，建議大家起文件名不要使用中文和數字，盡量使用英文字母。

先介紹 node.js 方式，是因為好多本地服務都是基於 node.js 的，移動端介紹完，馬上開始介紹 node.js 相關知識。

2.2、Nginx

官網地址：
http://nginx.org/en/download.html

1：建議下載一個穩定版本，選擇安裝之后。找到安裝路徑，如圖所示：

 

2：把你需要訪問的文件放入html文件夾內，默認進入的是 index.html 。或者其他文件需要選擇文件或文件名去運行。

3：啟動方法有兩種

• 命令行運行，命令如圖：

 

• 雙擊 nginx.exe ，即可啟動。

4：啟動成功之后，訪問文件，訪問有三種方法：

• localhost 或 http://127.0.0.1/ - 每個服務都會有一個端口號，nginx默認的端口號是80，訪問的時候不填寫端口號，默認也是80。如果想換一個端口號，可以修改 Nginx -> conf -> nginx.conf 配置文件，找到 80 替換成你想要的，訪問的時候就用下一種方法。
• localhost:80 或 http://127.0.0.1:80/ - 添加服務的端口號。
• http://192.168.124.11/ 或 http://192.168.124.11:80 - 使用的是本機局域網的ip訪問。如果不知道自己電腦ip可以使用ipconfig查看。

2.3、Browsersync

Browsersync是一個省時的瀏覽器同步測試工具，能夠讓多個瀏覽器打開的同一文件自動刷新，保持一致，調試方便，提高工作效率。依賴於node.js，安裝之前需要先安裝node環境。

1：打開終端窗口，運行以下命令：

npm install -g browser-sync

2：安裝完成之后，運行以下命令，查看版本，檢查是否安裝成功：

browser-sync --version

運行結果如圖：

 

3：打開終端窗口，進入需要訪問的文件目錄，運行命令：

browser-sync start --serve

運行結果如圖：

 

4：此時根據提示的地址就可以訪問文件了。端口號都是自動分配的，

5：停止服務，使用 ctr+c 選擇 y 停止服務。

6：如果你不想使用默認的端口號，就是想找茬，就使用命令：

browser-sync init

運行如圖：

 

根據提示運行命令：

browser-sync start --config bs-config.js

運行結果如圖：

 

根據提示，修改配置文件，重啟服務就可以了！

2.4、http-server

http-server 服務依賴於node，要先安裝node.js。除此不需要其他任何框架和工具。

1：使用以下命令，全局安裝http-server

npm install http-server -g

2：安裝完成，查看版本，檢查是否安裝成功，運行命令：

npm http-server --version

3：進入到需要訪問的文件目錄下，運行命令：

http-server

運行結果如圖：

 

4：停止服務，使用 ctr+c 選擇 y 停止服務。

上述幾種主要用於訪問簡單的html多頁面文件，不依賴於其他框架。

三、框架啟動服務

常見的VUE、React、Angular框架創建的項目，會自動下載很多依賴的包，自動生成配置文件。創建好項目之后啟動服務就好了。會使用框架啟動服務的，已經不需要我們上邊的內容了，所以框架暫時不介紹。

 

感謝你能看到這里，加油哦！

點贊支持、手留余香！