web服务器live-server的安装及使用

在写一下简单的项目或学习一些技术的练习,没有服务器的话,每次写的代码都需要手动刷新浏览器。有点无奈,但是如果你安装了这个live-server 服务器就可以不用手动刷新,实时预览自己写的代码了。

live-server是一个具有实时重载功能的小型开发服务器。用它来热加载HTML / JavaScript / CSS文件,但不能用于部署最终的网站系统。

(一)安装

1.前提条件需要node.js和npm的依赖(可以自己先搞定,不难);
2.使用npm全局安装:npm install -g live-server(本人使用淘宝镜像安装的)
web服务器live-server的安装及使用_第1张图片

(二)使用

1.需要在你使用的项目根目录下启动:liver-server(本人使用git,在指定目录下右击->git bash here后使用启动命令即可)
web服务器live-server的安装及使用_第2张图片

2.启动成功,网页自动弹项目目录出来;
web服务器live-server的安装及使用_第3张图片

3.退出该服务器,在命令行使用:ctrl+c

(三)简单的配置

1.默认端口号为8080,如果想修改,最简单的方式是启动的时候添加启动参数:live-server --port=8081 即可
web服务器live-server的安装及使用_第4张图片

2.live-server --参数 列表

--port=NUMBER - select port to use, default: PORT env var or 8080  
--host=ADDRESS - select host address to bind to, default: IP env var or 0.0.0.0 (“any address”)  
--no-browser - suppress automatic web browser launching  
--browser=BROWSER - specify browser to use instead of system default  
--quiet | -q - suppress logging  
--verbose | -V - more logging (logs all requests, shows all listening IPv4 interfaces, etc.)  
--open=PATH - launch browser to PATH instead of server root  
--watch=PATH - comma-separated string of paths to exclusively watch for changes (default: watch everything)  
--ignore=PATH - comma-separated string of paths to ignore (anymatch-compatible definition)  
--ignorePattern=RGXP - Regular expression of files to ignore (ie .*\.jade) (DEPRECATED in favor of --ignore)  
--middleware=PATH - path to .js file exporting a middleware function to add; can be a name without path nor extension to reference bundled middlewares in middleware folder  
--entry-file=PATH - serve this file (server root relative) in place of missing files (useful for single page apps)  
--mount=ROUTE:PATH - serve the paths contents under the defined route (multiple definitions possible)  
--spa - translate requests from /abc to /#/abc (handy for Single Page Apps)  
--wait=MILLISECONDS - (default 100ms) wait for all changes, before reloading  
--htpasswd=PATH - Enables http-auth expecting htpasswd file located at PATH  
--cors - Enables CORS for any origin (reflects request origin, requests with credentials are supported)  
--https=PATH - PATH to a HTTPS configuration module  
--proxy=ROUTE:URL - proxy all requests for ROUTE to URL  
--help | -h - display terse usage hint and exit  
--version | -v - display version and exit  

3.也可以把配置放在package.json的scripts下的server中,这样不用每次都命令行使用参数,然后使用命令行启动:npm run server(如何创建一个带package.json包的项目请看下一步)

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

4.创建一个带package.json包的项目,在项目根目录下使用命令行:npm init,可以自己设置

package name: (0710) demo
version: (1.0.0)
description: live-server的练习
entry point: (index.js)
test command:
git repository:
keywords:
author: 猿来独往
license: (ISC)
About to write to D:\GitHub_Repository\Clone_Files\vue-study\0710\package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "live-server的练习",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "猿来独往",
  "license": "ISC"
}


Is this OK? (yes)

然后使用第三步的配置,运行该项目就使用:npm run server
web服务器live-server的安装及使用_第5张图片

注意:如果浏览器不能实时自动刷新页面,可以试试用这个命令启动(亲测有效):live-server

你可能感兴趣的:(前端工具,Vue.js)