在写一下简单的项目或学习一些技术的练习，没有服务器的话，每次写的代码都需要手动刷新浏览器。有点无奈，但是如果你安装了这个live-server 服务器就可以不用手动刷新，实时预览自己写的代码了。
live-server是一个具有实时重载功能的小型开发服务器。用它来热加载HTML / JavaScript / CSS文件，但不能用于部署最终的网站系统。
（一）安装
1.前提条件需要node.js和npm的依赖（可以自己先搞定，不难）；
2.使用npm全局安装：npm install -g live-server（本人使用淘宝镜像安装的）
（二）使用
1.需要在你使用的项目根目录下启动：liver-server（本人使用git，在指定目录下右击->git bash here后使用启动命令即可）
2.启动成功，网页自动弹项目目录出来；
3.退出该服务器，在命令行使用：ctrl+c
（三）简单的配置
1.默认端口号为8080，如果想修改，最简单的方式是启动的时候添加启动参数：live-server --port=8081 即可
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3.也可以把配置放在package.json的scripts下的server中，这样不用每次都命令行使用参数，然后使用命令行启动：npm run server（如何创建一个带package.json包的项目请看下一步）
"scripts": {
"server": "live-server ./ --port=8081"
}
- 1
- 2
- 3
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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
然后使用第三步的配置，运行该项目就使用：npm run server
注意：如果浏览器不能实时自动刷新页面，可以试试用这个命令启动（亲测有效）：live-server
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">3</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/qq_35324453"> <img src="https://profile.csdnimg.cn/D/8/5/3_qq_35324453" class="avatar_pic" username="qq_35324453"> <img src="https://g.csdnimg.cn/static/user-reg-year/1x/3.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_35324453" data-report-click="{"mod":"popu_379"}" target="_blank">猿来独往</a></span> </div> <div class="text"><span>发布了38 篇原创文章</span> · <span>获赞 50</span> · <span>访问量 16万+</span></div> </div> <div class="right-message"> <a href="https://im.csdn.net/im/main.html?userName=qq_35324453" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>
1975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
