live-server的使用

講道理說實話這東西以前用過，這邊記錄下給尋找答案的搬條小路 和vscode插件中live-server一毛一樣，后來公司有人弄了http-server也是可以用來局域網靜態訪問電腦文件的，但是沒有熱更新（代碼你一改你還要回去瀏覽器刷新煩不煩？）

這東西用來在手機端做靜態H5當調試工具，ios/安卓一起測問題香不香？

訪問不了記得把防火牆關下

 

 

 

 

 

 

一款npm工具，全局npm i -g live-server后，項目目錄使用live-server命令行命令便可直接在瀏覽器中預覽（默認找index.html，其他請自行帶上文件名空格后跟在后面），並且自動全局監聽實時更新。

命令行常用配置表

 

 

 

---

本地開發常常需要搭建臨時的服務，第一時間我們會想到用http-server。

但現在流行修改文件瀏覽器自動刷新hot socketing（熱拔插），如live-reload。

若想瀏覽器自動打開項目，用opener。

現在live-server實現了三個插件的所有功能，並且很簡單就能啟動一個看起來很專業的本地服務

NPM全局安裝

npm install -g live-server

使用方法：

1. 在項目根目錄使用命令

npm init -y 初始化一個npm項目

2. 之后項目中找到package.json，修改scripts部分

    "scripts": {
      "server": "live-server ./ --port=8081"
    }

或者

 "scripts": {
      "server": "live-server 某個目錄"
    }

運行

npm run server //這個自動刷新可能還需要配置下
或者
live-server  //這個自動刷新沒問題

3.node

    var liveServer = require("live-server");
     
    var params = {
        port: 8181, // Set the server port. Defaults to 8080. 
        host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP. 
        root: "/public", // Set root directory that's being served. Defaults to cwd. 
        open: false, // When false, it won't load your browser by default. 
        ignore: 'scss,my/templates', // comma-separated string for paths to ignore 
        file: "index.html", // When set, serve this file for every 404 (useful for single-page applications) 
        wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec. 
        mount: [['/components', './node_modules']], // Mount a directory to a route. 
        logLevel: 2, // 0 = errors only, 1 = some, 2 = lots 
        middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack 
    };
    liveServer.start(params);

創建成功后，在靜態文件目錄下使用live-serverr就可以了

live-server運行在8080端口下，可以通過127.0.0.1:8080來訪問靜態頁面。