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

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

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 "

 

 

 

 

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细节探究浅显实践和探索，有兴趣的亲故可前往深入理解.