app.use(express.static('目录'))静态资源文件

怼烎@ 2022-04-22 06:38 233阅读 0赞

1.首先要理解什么是静态资源文件？

通俗点来说，静态资源文件就是，不同用户访问到的都是同一份内容，不管是张三，李四，王五，访问到的内容都是一样的，

// 静态资源文件
    张三呈现的是“你好”
    李四呈现的是“你好”
    王五呈现的是“你好”

与其相对的，动态资源文件就是，随着访问用户的不同，呈现的内容也不一样。比如，

// 动态资源文件
    张三呈现的是“你好，张三”
    李四呈现的是“你好，李四”
    王五呈现的是“你好，王五”

因此，像js,css,pic 这些所有用户都能访问到的公共资源，通常都会定义为静态资源文件

2.怎么定义文件为静态资源文件?

app.use(\[path,\] function \[, function...\]);

第一个参数path默认为 '/' , 也就是说下列两个语句效果一样

// 将static目录下的文件定义为静态资源文件
    app.use(express.static(__dirname + '/static')); 
    app.use('/', express.static(__dirname + '/static'));

3.可以定义多个目录下文件为静态资源文件，服务器会根据你定义的顺序匹配

注意： **先定义先匹配**  而不是 后面的定义覆盖前面的定义

比如，在 public目录 和 static目录 下有同名文件  index.html ,此时我们定义如下规则

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

这时localhost:8080/index.html 访问到的是 public目录下 的 index.html

![2018110222263112.png][]

4.我们还可以在前面加一个虚拟路径，来加载静态资源文件

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

此时访问 static 目录下 文件用 localhost:8080/文件名 访问

访问 public 目录下 文件用 localhost:8080/public/文件名 访问

比如访问两个目录下的 index.html 路径分别为

// static目录下index.html访问路径
    " http://localhost:8080/index.html "
    // public目录下index.html访问路径
    " http://localhost:8080/public/index.html "

![20181102223422149.png][]![20181102223432502.png][]

5.使用express-static

此种用法需先下载express-static

**npm install --save-dev express-static**

var static = require('express-static');
    app.use(static(__dirname + '/static'));

与

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

效果相同

此篇文章参考[express细节探究][express]浅显实践和探索，有兴趣的亲故可前往深入理解.

[2018110222263112.png]: /images/20220422/6a565319eebf4ce9873082a77209c07e.png
[20181102223422149.png]: https://img-blog.csdnimg.cn/20181102223422149.png
[20181102223432502.png]: /images/20220422/d4ecfebf36454181944cdba254c6cd2a.png
[express]: https://www.cnblogs.com/A-dam/p/5053299.html