什么是 解静态文件服务
在web 的领域，一切请求全都是为了资源，资源也可以任意的形式，文本文件，图片文件， 字符片段等等。只要明白了这一点，理解静态文件服务就相对轻松了。
在服务器上，一切都是资源， 我们发出的任何请求，都是请求资源。当我们在浏览器中输入www.baidu.com的时候，我们是向www.baidu.com服务器请求index.html资源，发送的请求是get请求。页面中可能会有css, img, js等文件，当html 文件在进行解析的时候，它碰到css, img, js时，就会向服务器发送请求，请求这些资源，这些请求也是get 请求。我们平时写js 代码，发送ajax 请求， 它请求的也是资源，只不过通常是json 字符串或xml。
express static 实现静态文件服务器
现在用express 搭建一个服务器，来实战理解一下express.static 托管静态资源。
-
初始化express项目：
1）新建一个目录，就叫 express_static 吧，
2）npm init -y 快速创建package.json文件，
3）npm install express --save 安装express 依赖。 -
新建文件 server.js，来写服务器代码。我们先按照Express的官网的要求使用express.static中间件。
1）引入express模块：const express = require(‘express’);
2）然后创建服务器：const app = express();
3）然后通过express.static给服务器提供静态文件访问： app.use(express.static(‘目录名’)) -
再新建一个public文件夹来存放上面说的要托管的文件：
在里面建index.html 文件，和css 文件。
整个目录结构如下：
index.html 中随便写点什么，我们就写一个h1好了，还要引入css, 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>express.static 托管静态资源</h1>
</body>
</html>
css也简单点，给h1 一个color :
h1 { color: red; }
server.js 服务端代码:
var express = require('express');
var path = require('path');
var app = express();
// 利用express.static中间件来托管静态资源。
app.use(express.static(path.join(__dirname, 'public')));
app.listen(5000, () => {
console.log('start: 5000')
})
服务器启动后，打开浏览器，输入localhost:5000, 它确定显示了index.html的内容，并且也应用到了css 样式，确实是访问到了静态文件html, css.
刚才在上面说了，当我们在浏览器地址栏中，输入网址时，它是在请求资源index.html，html在解析的过程中碰到css， 它也是在请求资源，css文件，我们来看一下是不是这样，这样用到浏览器控制台中的NetWork 板块。打开控制台，找到Network版块，可以看到，它确实是发送了两个请求，一个是localhost, 一个是style.css，和我们预想的一样。
点击localhost 的看一下具体的内容：
发送的url : http://localhost:5000/, 请求方式是Get 请求。点到图中的Preview 或Response看一下， 返回的是index.html 文件。
image
再来看一下style.css：
它请求的地址是 http://localhost:5000/style.css，我们在index.html中写的是 href='./style.css' 相对路径，但在真实的请求中，它是向服务器根目录请求的资源。当然方法还是get 请求。Response是我们写的css 文件。
image
静态文件的访问请求，服务器确实是帮我们处理好了，这就是 express.static 的功劳。
验证：把 express.static 的那段代码注释掉，重新启动服务， 任何资源都访问不到。
看一下控制台的Network, 404 not found, 也就是说，服务器没有处理这个请求的代码。
express.get 访问静态资源
如果不用 express.static ，还可以用什么方法来访问静态资源？
我们知道，它这里其实是发送了一个get 请求，请求的地址是http://localhost: 5000, 根据这个请求内容，我们可以自己写一个处理请求，其实它就是路由，get 请求用到的是app.get, 由于这里的请求是服务器根地址，所以路径是'/', 响应就是index.html文件，这里用到是sendfile 来发送文件, 代码如下：
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'))
})
这样下来，可以看到页面显示文字了，但是字体样式没有生效，看下控制台，style.css 状态是404 not found
这时再看控制台， localhost 请求成功了，style.css 是红色的，状态是404 not found， 也就是没有找到资源
image
这时我们已经知道了, 浏览器向服务器请求了css 资源，但是在服务端并没有处理这个请求，所以就报404的错误，这时和处理html 一样，我们要写一个路由，来处理css请求，这里还是get请求，所以app.get, 因为请求的是所有的css文件，请求的处理路径要写成’*.css’, 文件的发送还是用sendFile.
app.get('*.css', (req, res) => {
res.sendFile(path.join(__dirname, 'public/style.css'))
})
这时我们没有使用express.static 静态服务中间件， 而是自已写的路由，你会发现作用是一样的。我们的页面中还没有js, image 等资源，如果有的话，我们还需要写处理js文件和图片文件的路由，分别对应js 和image 文件的请求。
到这里就明白了，html，js, css, image 都是存放在服务端的资源，当在浏览器中输入网址的后，我们就是向服务器请求这些资源，相对应的服务端就要有对应的路由来处理这些请求，否则就是404 not found 错误。对于这些静态文件的路由处理，代码逻辑都是一致的，就是返回请求的文件。
再往大处想一想，我们每写一个网站的服务端，都要处理这些静态文件的请求， 因为几乎所有的html文件是都包括js, css, image 文件， 是不是太麻烦了，我们可以复制粘贴，但也是不太好，最好的办法，当然是把这些一致的处理逻辑抽离出来，形成一个单独的组件，直接使用组件就好了，这就是express.static 中间件的由来，它就是处理js, css, image等静态文件的请求，它把我们对静态文件的路由处理封装起来。 它的参数是一个文件夹，就是当有请求过来的时候，直接到该文件来下寻找资源，如果有，就直接返回文件，程序不再向下执行，如果找不到，程序再向下执行。那我们直接把静态文件放到该文件夹，就不用写这些静态文件的路由了。
express.static 注意点
1）中间件的放置位置
这里还要注意一点，express.static 中间件的使用，要放在路由之前。路由的处理就是有一个匹配就返回，我们的 express.static 本质上也是一个路由。如果在express.static之气有的其它请求处理这些静态文件的请求，就不会再轮不到 express.static 来进行执行了。
2）中间件托管文件的路径
在express的官网，express.static 还有一种使用情况， 就是两个参数，第一个参数是一个路径，第二个参数才是express.static 的使用。
app.use('/static', express.static('public'));
第一个参数路径，表示的是我们的静态文件的引入路径的前面有一个路径/static ,比如，我们的index.html中引入css 改成如下方式
<link rel="stylesheet" href=" /static/style.css">
css 的资源请求的路径前面肯定会再一个static目录，http://localhost:5000/static/style.css，因为前端资源请求前面有static路径, 所以我们静态文件的路由处理，前面也要加static路径进行匹配。
var express = require('express');
var path = require('path');
var app = express();
// 因为前端资源请求前面有static路径, 所以我们静态文件的路由处理，前面也要加static路径进行匹配。
app.use('/static', express.static(path.join(__dirname, 'public')));
// 为了处理html 文件的请求。
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'))
})
app.listen(5000, () => {
console.log('start: 5000')
})
node 实现静态文件服务器
先来看看nodejs怎么读取本地文件。以读取上面的 /public/index.html 为例
根目录新键 serve2.js 文件：
1）http.createServer 创建服务
2）fs.readFile 读取文件
const http = require('http')
const fs = require('fs')
const url = require('url')
const path = require('path')
const PORT = 3001
function serverStatic (req, res) {
let filePath
if (req.url === "/") {
filePath = "/public/index.html"
} else {
filePath = "./public/" + url.parse(req.url).pathname
}
let filePathFull = path.join(__dirname, filePath)
// console.log("filePathFull: ", filePathFull)
fs.readFile(filePathFull, function (err, data) {
if (err) {
res.end("<h1>500</h1>服务器内部错误！")
// console.log("err: ", err)
} else {
res.writeHead(200, { 'content-type': 'text/html'})
res.end(data.toString())
}
})
}
const server = http.createServer(serverStatic);
server.listen(PORT, function () {
console.log("Server runing at port: " + PORT + ".")
})
根目录下以 node 命令启动服务：
node serve2.js
再浏览器打开 http://localhost:3001/，可以看到页面，但是样式没有生效。虽然 style.css 我们也访问了，但是我们在上面设置死了 content-type：text/html，而 style.css 的 contentType 应该为 text/css，所以应该根据我们访问文件的后缀来动态设置。
我们来优化下 serve2.js ：
const http = require('http')
const fs = require('fs')
const url = require('url')
const path = require('path')
//访问端口号
const PORT = 3001
//添加MIME类型
var MIME_TYPE = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml"
}
function serverStatic (req, res) {
let filePath
if (req.url === "/") {
filePath = "/public/index.html"
} else {
filePath = "./public/" + url.parse(req.url).pathname
}
let filePathFull = path.join(__dirname, filePath)
console.log("filePathFull: ", filePathFull)
let ext = path.extname(filePathFull);
ext = ext ? ext.slice(1) : 'unknown';
let contentType = MIME_TYPE[ext] || "text/plain"
fs.readFile(filePathFull, function (err, data) {
if (err) {
res.end("<h1>500</h1>服务器内部错误！")
console.log("err: ", err)
} else {
res.writeHead(200, { 'content-type': contentType })
res.end(data.toString())
}
})
}
const server = http.createServer(serverStatic);
server.listen(PORT, function () {
console.log("Server runing at port: " + PORT + ".")
})
优化好后，重启服务，访问页面，就能看到 style.css 文件生效了。
应用：本地访问 vue 打包后的文件
vue 项目 build 之后的包（这里设为dist文件夹），如果想在本地先预览，可以怎么设置？
即访问本地index.html文件，所以我们需要启动一个本地服务，还需要根据访问不同的文件设置不同 contentType，还需要在刷新时重定向回index.html上：
const express = require("express")
const path = require("path")
const app = express()
const port = 3001
let history = require('connect-history-api-fallback')
//重定向到index.html
history({
rewrites: [{
from: /^\/libs\/.*$/,
to: '/index.html'
}]
});
app.use(history());
app.use(express.static(path.join(__dirname, 'dist')));
app.listen(port, () => {
console.log('Listening at http://localhost:' + port)
})
相关：
Express static 托管静态文件 理解
原生koa2实现静态资源服务器
koa-static中间件使用
HTML5 History模式 后端配置
网友评论