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

前端人發表於2021-08-24
前端

前邊幾篇文章介紹本地快取，還有 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框架建立的專案，會自動下載很多依賴的包，自動生成配置檔案。建立好專案之後啟動服務就好了。會使用框架啟動服務的，已經不需要我們上邊的內容了，所以框架暫時不介紹。

 

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

點贊支援、手留餘香！

相關文章