详解利用 Express 托管静态文件的方法


Posted in Javascript onSeptember 18, 2017

通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 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

所有文件的路径都是相对于存放目录的,因此,存放静态文件的目录名不会出现在 URL 中。

如果你的静态资源存放在多个目录下面,你可以多次调用 express.static 中间件:

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

访问静态资源文件时,express.static 中间件会根据目录添加的顺序查找所需的文件。

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:

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

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

Javascript 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
js 对象是否存在判断
Jul 15 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
canvas时钟效果
Feb 16 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JS原型与继承操作示例
May 09 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
Express使用html模板的详细代码
Sep 18 #Javascript
Mongoose中document与object的区别示例详解
Sep 18 #Javascript
新手vue构建单页面应用实例代码
Sep 18 #Javascript
angularjs路由传值$routeParams详解
Sep 05 #Javascript
vue-ajax小封装实例
Sep 18 #Javascript
信息滚动效果的实例讲解
Sep 18 #Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
python回调函数的使用方法
2014/01/23 Python
Python创建系统目录的方法
2015/03/11 Python
Python正则表达式使用经典实例
2016/06/21 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python制作exe文件简单流程
2019/01/24 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
七年级政治教学反思
2014/02/03 职场文书
教师个人自我鉴定
2014/02/08 职场文书
房地产推广策划方案
2014/05/19 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers