使用vue-cli创建的项目,能够实现浏览器中自动刷新,实时查看项目效果,其中的原理在于,webpack在本地启动了一个本地服务器,将本机当作一台服务器;

打包后的文件是一个html静态页面,在本地文件夹中直接打开的一般都素hifile协议,当代码中存在http或者https的链接时,html页面就无法正常打开,为了解决这种情况,需要在本地启动以恶搞本地的服务器。

利用node.js的http-server开启本地服务,步骤如下:

首先电脑已经安装了node.js,安装http-server

npm install http-server -g

然后进入你想作为本地服务器根目录的位置,执行命令htpp-server

启动本地服务器成功,可以使用ctrl+c关闭服务器

http-server -c-1   (⚠️只输入http-server的话,更新了代码后,页面不会同步更新)

简写 hs

可以修改服务器的监听地址以及监听的端口号

hs <path> -a 127.0.0.1 -p 8090

path 时目录地址,默认时cmd打开的目录地址,可以省略,默认时cmd打开的路径地址

-a 参数是监听地址

-p 参数是监听的端口

其他参数

作用 作用
-p 或者 --port 端口设置,默认是 8080
-a -a 监听地址设置默认是 0.0.0.0
-d 是否显示文件列表 默认true
-i 显示自动索引 默认true
-g 或者 --gzip  默认false,当文件的gzip版本存在且请求接受gzip编码时,它将服务于./public/some-file.js.gz,而不是./public/some-file.js
-e 或者 --ext 如果没有提供默认文件扩展名(默认为html)
-s 或者 --silent  禁止控制台日志信息输出
–cors 允许跨域资源共享
-o 启动服务后打开默认浏览器
-c 设置缓存cache-control max-age heade存留时间(以秒为单位),示例:-c10是10秒,默认是3600秒,如果要禁用缓存就使用-c-1
-U 或者 --utc 使用 UTC格式,在控制台输出时间信息
-P 或者 --proxy  通过一个 url地址,代理不能通过本地解析的资源
-S 或者 --ssl  使用https协议
-C 或者 --cert  ssl证书文件的路径,默认是cert.pem
-K 或者 --key  ssl密匙文件路径
-h 或者 --help  显示帮助

参考:https://blog.csdn.net/ithanmang/article/details/88375259

自己手动测试,http-server启动成功成功之后页面却无法打开,防火墙也关闭了,还是不行,不知道怎么回事儿,就使用了anywhere,可以启动成功;

补充:http-server 默认需要一个入口文件,启动成功之后,输入ip地址加端口号,后面跟上index.html就可以使用了

转载于:https://www.cnblogs.com/xiaofenguo/p/11315810.html

node.js http-server 搭建本地服务器相关推荐

  1. Node.js Git Server搭建及Git常用操作笔记

    Node.js Git Server搭建及Git常用操作笔记 安装Git工具即可在本地进行Git仓库的管理,如果要实现远程仓库则需要搭建Git Server.通过Node.js搭建Git Server ...

  2. 【WebPack】引入Vue;认识Plugin;使用uglifyjs丑化JS代码;搭建本地服务器;生产开发环境配置文件的抽离

    Vue实战 - 配套源码 npm install --save-dev vue-loader vue-template-compiler 可能会报错如下: 以上报错解决方式:修改版本^13.0.0,然 ...

  3. Ubuntu Server搭建FTP服务器(2) --本地用户FTP服务器架设

    Ubuntu Server搭建FTP服务器(2) --本地用户FTP服务器架设 参考:ubuntu中文wiki百科,网址:wiki.ubuntu.org.cn 环境:Ubuntu 9.04 Serve ...

  4. svn 使用TortoiseSVN server搭建本地SVN服务器

    使用TortoiseSVN server搭建本地SVN服务器 转载于:https://www.cnblogs.com/fireblackman/p/10799625.html

  5. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...

  6. 本地跨域处理ajax,Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...

  7. vue+node.js+mysql项目搭建

    前言 用vue搭建前端页面.用node开发后端接口.数据库用mysql 可行性分析 缺点: nodejs单线程,不能做cpu密集型操作,导致时间片不能释放,阻塞后面的任务. nodejs可靠性比较低, ...

  8. 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离

    一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

  9. NGINX配置基于Node.js服务的负载均衡服务器

    NGINX配置基于Node.js服务的负载均衡服务器 本部署指南说明了如何使用NGINX开源和NGINX Plus在Node.js应用程序服务器池之间平衡HTTP和HTTPS通信.本指南中的详细说明适 ...

最新文章

  1. VS2015 提示 无法启动 IIS Express Web 服务器
  2. svn如何隐藏代码路径_程序员课堂—如何通过改善代码风格来消灭隐藏bug
  3. 无关于目标or特定于目标:简单且有效的零样本立场检测对比学习方法
  4. 揭秘微信「看一看」如何精准挖掘你感兴趣的内容
  5. ubuntu下面调整Atom的python运行结果中的字体大小
  6. Android中shape的解析
  7. Bing.com在.NET Core 2.1上运行
  8. B - Beautiful Paintings
  9. GDAL对空间数据的管理
  10. 基于MATLAB的图像复原
  11. 国内HTML5前端开发框架汇总
  12. 阿里云天池打卡笔记兼错题集
  13. 基于区块链的供应链金融创新
  14. html手机号输入框,手机号输入框自动格式化为344
  15. 720phi10p 和 720p有什么区别_除了情怀还剩什么?索尼Z5 Compact评测
  16. HTML5网页设计基础——精美电商悬浮窗
  17. 【安卓笔记】android申请储存权限,读写文件
  18. Vero quibusdam eos alias.
  19. Journal of Electronic Imaging(JEI)投稿分享
  20. 传统的七大质量管理工具

热门文章

  1. oracle11g远程命令执行漏洞,漏洞应急|Oracle Weblogic Server远程代码执行漏洞(CVE-2021-2109)...
  2. 如何保证集合是线程安全的? ConcurrentHashMap如何实现高效地线程安全?(转)
  3. detectmultiscale函数参数含义_OpenCV人脸识别--detectMultiScale函数
  4. bs架构多用户访问_Spark架构
  5. @PropertiesSource注解读取配置文件中的数据
  6. linux 用户设密码,linux 上添加用户,设置密码
  7. python填充nan_Pandas的数据清洗-填充NaN数据
  8. linux c 获取 多个硬盘序列号_veket系统中使用GParted进行硬盘分区
  9. 客户细分常见的十大错误
  10. 原生安卓与html 好坏,安卓非原生 系统体验差别大