live-server小型本地服務器

live-server

一.簡介

​ 這是一個具有實時重新加載功能的小型開發服務器,在我們本地開發中,特別是寫靜態頁面的時候,每次修改網頁的時候,我們不希望每次去點刷新按鈕,而是自動重新加載.也就是我們需要搭建一個服務來進行頁面熱更新處理.並且自動實時更新咱們的文件.

二.爲什麼要使用

​ 使用它有兩個原因:

​ 1.file:// 由於安全性限制,ajax請求不適用於該協議,即,如果您的站點通過JavaScript獲取內容，則您需要一臺服務器。

​ 2.在更改文件後自動重新加載頁面可以加快開發速度。

三.安裝

​ 前提是要安裝node.js和npm.

​ npm方式:

$  npm install -g live-server    //-g 全局安裝

四.使用

​ 我們這邊用最簡單的使用方式,其餘的配置參數可以都不用管.直接cmd到我們站點的根目錄下,輸入

 $ live-server

然後會自動打開http://127.0.0.1:8080/,此時就可以打開靜態頁面了

五.參數命令

var liveServer = require("live-server");

var params = {
	port: 8181, //端口 默認8080
	host: "0.0.0.0", // 主機
	root: "/public", // 根目錄
	open: false, // When false, it won't load your browser by default.
	ignore: 'scss,my/templates', 
	file: "index.html", 
	wait: 1000, // Waits for all changes, before reloading.
	mount: [['/components', './node_modules']], 
	logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
	middleware: [function(req, res, next) { next(); }] 
};

liveServer.start(params);

以上是部分的參數命令,通常我們會遇到的問題基本就是端口占用,8080端口不想用的話,我們可以這樣配置.

在項目根目錄的package.json 的scripts 中添加如下腳本

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

最後通過 npm run server運行即可!