【http-server】http-server的安装、前端使用http-server启动本地dist文件服务:

文章目录

        • 一、http-server 简介:
        • 二、安装node.js:[https://nodejs.org/en](https://nodejs.org/en)
        • 三、安装http-server:[https://www.npmjs.com/package/http-server](https://www.npmjs.com/package/http-server)
        • 四、开启服务:
        • 五、http-server参数:
            • 【1】修改端口
            • 【2】其他参数
        • 六、案例:


一、http-server 简介:

http-server 是一个简单的零配置的命令行
http服务器,它足够强大便于生产和使用,用于本地测试和开发。

有时候我们打开一个文档使用file协议打开的时候,不能发送ajax请求,只能使用http协议才能请求资源,具体的区别大家可以去参考[这篇文档] (www.cnblogs.com/lishanlei/p…),所以此时我们需要在本地建立一个http服务,通过IP加端口号,来访问资源。
我一般的做法就是通过vscode的插件或者通过webstorm来打开,现在可以通过http-server来便捷的创建一个本地服务。

二、安装node.js:https://nodejs.org/en

官网地址 ,下载官网推荐版本,并安装。
在命令行输入命令node -v以及npm -v检查版本,确认是否安装成功。

三、安装http-server:https://www.npmjs.com/package/http-server

http-server的详细介绍,包括参数等: www.npmjs.com/package/htt…;
在命令行中安装到全局,最好是使用管理员权限安装 (-g表示安装到全局,之后所有文件夹路径下输入http-server都可以使用):

npm install http-server -g

四、开启服务:

命令行中进入目标文件夹(也就是需要启动服务的文件夹),输入如下命令:

http-server  #或者 简写  hs

本地服务器就启动起来了,默认端口为8080。

五、http-server参数:

【1】修改端口
http-server  -a 127.0.0.1 -p 8090
http-server [path] [options]

****是目录地址,可以省略,默认是cmd打开的路径地址
-a 参数是监听地址
-p 参数是监听端口

【2】其他参数
参数作用
-p 或者 --port端口设置,默认是 8080
-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 或者 --certssl证书文件的路径,默认是cert.pem
-K 或者 --keyssl密匙文件路径
-h 或者 --help显示帮助

六、案例:

http-server --cors -o

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/37534.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis 优惠卷秒杀(二) 异步秒杀、基于Stream的消息队列处理

目录 基于Stream的消息队列 Redis优化秒杀 登录头 改进秒杀业务,调高并发性能 Redis消息队列实现异步秒杀 ​编辑基于List结构模拟消息队列 基于PuSub的消息队列 ​编辑 基于Stream的消息队列 Redis消息队列 基于Stream的消息队列 Redis优化秒杀 登录头 改…

LeetCode 142.环形链表II

142. 环形链表 II - 力扣(LeetCode) /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(NULL) {}* };*/ class Solution { public:ListNode *detectCycle(ListNode …

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题)

【微信小程序创作之路】- 小程序窗口导航栏配置 第五章 微信小程序窗口导航栏配置 文章目录 【微信小程序创作之路】- 小程序窗口导航栏配置前言一、入口文件的配置二、页面配置三、全局默认窗口配置1.navigationBarTitleText:导航栏标题文字2.navigationBarBackgr…

【UE4 C++】02-编译、生成当前的C++程序

一、编译 编译快捷键: CtrlF7 如果不使用快捷键,可以点击顶部菜单栏中的下拉按钮,然后选择自定义 点击添加命令 点击“生成”,选择编译“”,点击“确定” 此时可以看到顶部菜单栏多了一个用于编译的按钮 二、生成 鼠…

TypeScript学习笔记

TypeScript学习笔记 1、运行环境 1.1、初始化 npm init -y npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin1.2、webpack.config.js const path require(path) const htmlWebpackPlugin require("html-webpack-plugin&…

Todo-List案例版本五

安装库npm i pubsub-js 消息的订阅与发布 src/App.vue <template><div class"app"><h1>{{ msg }}</h1><School/><Student/></div> </template><script> import Student from ./components/Student import …

【unity之IMGUI实践】单例模式管理数据存储【二】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

安卓UI:SearchView

目录 一、SearchView介绍 二、常用方法 &#xff08;一&#xff09;、监听器&#xff1a; (二)、常用方法&#xff1a; (三)、其他常用方法 三、例子&#xff1a; MainActivity2 &#xff1a; ChatListAdapter &#xff1a; item_people_view: activity_main2: 运行结果…

Java支付SDK接口远程调试 - 支付宝沙箱环境【公网地址调试】

文章目录 1.测试环境2.本地配置3. 内网穿透3.1 下载安装cpolar内网穿透3.2 创建隧道 4. 测试公网访问5. 配置固定二级子域名5.1 保留一个二级子域名5.2 配置二级子域名 6. 使用固定二级子域名进行访问 转载自cpolar极点云文章&#xff1a;Java支付宝沙箱环境支付&#xff0c;SD…

详解 ➾【FTP服务工作原理及连接模式】

详解 ➾【FTP服务工作原理及连接模式】 &#x1f53b; 前言&#x1f53b; 一、FTP服务简介&#x1f6a5; 1.1 FTP工作原理&#x1f6a5; 1.2 匿名用户访问的产生&#x1f6a5; 1.3 FTP服务的连接模式&#x1f6a5; 1.4 几种流行的FTP服务器软件 &#x1f53b; 总结—温故知新 &…

QTranslator语言转换

//appname的格式 例如通常为&#xff08;QQ为应用的名称&#xff09; QQ_en.ts或QQ_zh_CN.ts QString qmName"zh_CN"; QTranslator trans ; QString qm QString(":/translatoin/qt/appname_%1.qm").arg(qmName); auto ret trans.load(qm); Q_UNUSED(ret)…

WebSocket理解

WebSocket理解 WebSocket定义与HTTP关系相同点:不同点&#xff1a;联系总体过程 HTTP问题长轮询Ajax轮询 WebSocket特点 WebSocket 定义 本质上是TCP的协议 持久化的协议 实现了浏览器和服务器的全双工通信&#xff0c;能更好的节省服务器资源和带宽 与HTTP关系 相同点: 基于…

小白到运维工程师自学之路 第五十三集 (rsync+inotify备份)

一、概述 Rsync是一个用于在不同计算机之间同步文件和文件夹的工具。它可以在本地计算机和远程服务器之间复制、更新和备份文件。rsync通过比较源和目标文件的差异来最小化传输的数据量&#xff0c;从而提供高效的文件同步功能。 Inotify是Linux内核提供的一种机制&#xff0…

web中引入live2d的moc3模型

文章目录 前言下载官方sdk文件使用ide编译项目&#xff08;vsCode&#xff09;项目初始化使用vsCode项目树介绍使用live server运行index页面 演示导入自己的模型并显示modelDir文件resources文件夾案例模型修改modelDir然後重新打包項目運行 前言 先跟着官方sdk调试一遍&…

【状态估计】基于卡尔曼滤波器和扩展卡尔曼滤波器用于 INS/GNSS 导航、目标跟踪和地形参考导航研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Windows VScode如何配置与使用git?

当我们在VScode中编写代码后&#xff0c;需要提交到git仓库时&#xff0c;但是我们又不想切换到git的命令行窗口&#xff0c;我们可以在VScode中配置git&#xff0c;然后就可以很方便快捷的把代码提交到仓库中。 1. 官网下载安装Git命令行工具 根据自己的电脑系统&#xff0c…

尚硅谷Docker实战教程-笔记12【高级篇,Docker-compose容器编排】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷Docker实战教程&#xff08;docker教程天花板&#xff09;_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇&#xff0c;Docker理念简介、官网介绍、平台入门图解、平台架构图解】…

3.2.17 什么是数组及应用

【分享成果&#xff0c;随喜正能量】人这一生&#xff0c;好不好都得自己走&#xff0c;累不累都得自己承受。每个人都有难言之苦&#xff0c;每个人都有无声的泪&#xff0c;岁月可曾放过谁&#xff1f;再风光的人&#xff0c;背后都有寒凉凄楚&#xff0c;再幸福的人&#xf…

[每周一更]-(第54期):Go的多版本管理工具

参考 https://zhuanlan.zhihu.com/p/611253641https://learnku.com/articles/78326 前文概要 Go语言从开始使用从1.13起步&#xff0c;随着泛型的支持&#xff0c;带领团队在转型Go的时候&#xff0c;做基础组件架构选型使用1.18&#xff0c;但是Go版本不断迭代想使用最新版本…

C++类相关概念

1. 函数形参默认值 &#xff08;1&#xff09; 建议函数&#xff08;不仅仅是构造函数&#xff09;形参默认值只在函数声明中指定&#xff1b; &#xff08;函数声明和定义写在同一个文件中&#xff0c;则函数声明、定义两者之一或两者都可指定形参默认值&#xff0c;两者都指…