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

前端人 發表於 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框架建立的專案,會自動下載很多依賴的包,自動生成配置檔案。建立好專案之後啟動服務就好了。會使用框架啟動服務的,已經不需要我們上邊的內容了,所以框架暫時不介紹。

 

感謝你能看到這裡,加油哦!

點贊支援、手留餘香!

相關文章