标签：UI install ESS head 就会 npm 服务 com 一点
今天偶尔看了一下服务端渲染，遇到了express.static, 在以前学习webpack配置服务端渲染时，也使用express.static 中间件，两者配置不太一样，由于当时也没有认真学，所以 一时之间非常困惑，不知道它是怎么正确使用。看了Express 官网，介绍的也是非常简单，还是不太懂，就查了一些资料，算是有一点懵懂的认识。
首先要认识一点，在服务器上，一切都是资源， 我们发出的任何请求，都是请求资源。当我们在浏览器中输入www.baidu.com的时候，我们是向www.baidu.com服务器请求index.html资源，发送的请求是get请求。页面中可能会有css, img, js等文件，当html 文件在进行解析的时候，它碰到css, img, js时，就会向服务器发送请求，请求这些资源，这些请求也是get 请求。我们平时写js 代码，发送ajax 请求， 它请求的也是资源，只不过通常是json 字符串或xml。 在web 的领域，一切请求全都是为了资源，资源也可以任意的形式，文本文件，图片文件， 字符片段等等。只要明白了这一点，理解静态文件服务就相对轻松了。
现在用express 搭建一个服务器，来实战理解一下express.static 托管静态资源。新建一个目录，就叫express-static吧。 npm init -y 快速创建package.json文件，npm install express --save 安装express 依赖。新建server.js，来写服务器代码. 我们先按照Express的官网的要求使用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 服务端代码，文件也很简单，只使用了express.static中间件。它接受一个参数，就是静态资源文件所在的目录，在这里是public目录，直接把public传递给它就可以了，按照官网的说法，只要这样配置，服务器就可以提供静态文件访问了。nodemon 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 文件
现在可以再来看一下style.css
它请求的地址是 http://localhost:5000/style.css，我们在index.html中写的是 href=‘./style.css‘ 相对路径，但在真实的请求中，它是向服务器根目录请求的资源。当然方法还是get 请求。Response是我们写的css 文件。
静态文件的访问请求，服务器确实是帮我们处理好了，这肯定是我们express.static的功劳。我们把express.static的那段代码注释掉就知道了。注释掉代码，
// 利用express.static中间件来托管静态资源。 // app.use(express.static(path.join(__dirname, ‘public‘)));
然后刷新一下浏览器， 任何资源都访问不到。
看一下控制台的Network, 404 not found, 也就是说，服务器没有处理这个请求的代码
我们知道，它这里其实是发送了一个get 请求，请求的地址是http://localhost: 5000, 根据这个请求内容，我们可以自己写一个处理请求，其实它就是路由，get 请求用到的是app.get, 由于这里的请求是服务器根地址，所以路径是‘/‘, 响应就是index.html文件，这里用到是sendfile 来发送文件
标签：UI install ESS head 就会 npm 服务 com 一点
原文地址：https://www.cnblogs.com/SamWeb/p/8762098.html
