在Express中提供静态文件的实现方法


Posted in Javascript onOctober 17, 2019

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件,请使用 Express 中的 express.static 内置中间件函数。

将包含静态资源的目录的名称传递给 express.static 中间件函数,以便开始直接提供这些文件。例如,使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件:

app.use(express.static('public'));

现在,可以访问位于 public 目录中的文件:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 相对于静态目录查找文件,因此静态目录的名称不是此 URL 的一部分。

要使用多个静态资源目录,请多次调用 express.static 中间件函数:

app.use(express.static('public'));
app.use(express.static('files'));

Express 以您使用 express.static 中间件函数设置静态目录的顺序来查找文件。

要为 express.static 函数提供的文件创建虚拟路径前缀(路径并不实际存在于文件系统中),请为静态目录指定安装路径,如下所示:

app.use('/static', express.static('public'));

现在,可以访问具有 /static 路径前缀的 public 目录中的文件。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而,向 express.static 函数提供的路径相对于您在其中启动 node 进程的目录。如果从另一个目录运行 Express 应用程序,那么对于提供资源的目录使用绝对路径会更安全:

app.use('/static', express.static(__dirname + '/public'));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
微信小程序一周时间表功能实现
Oct 17 #Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 #Javascript
JS工厂模式开发实践案例分析
Oct 17 #Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python Tensor和Array对比分析
2020/01/08 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
园林设计师自荐信
2013/11/18 职场文书
中学运动会广播稿
2014/01/19 职场文书
创先争优制度
2014/01/21 职场文书
民族团结先进个人材料
2014/02/05 职场文书
青安岗事迹材料
2014/05/14 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
公司搬迁通知
2015/04/20 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA