第一步: 下载 nginx
nginx download官网地址：http://nginx.org/en/download.html
下载后，将其解压到 本地的任一目录下。
此时我们可以看到有如下目录:
html路径下放置我们前端 build好的代码(如何build，相信各位都会)，conf下有个非常重要的文件nginx.conf，用来配置nginx服务器。
第二步: 配置nginx服务器
打开nginx.conf文件，直接找到配置 server 的地方，取消掉暂时用不到的配置，下面便是我的配置:
server {
# 启动后的端口
listen 8880;
# 启动时的地址
server_name localhost;
# 启动后，地址栏输入: localhost:8880, 默认会在html文件夹下找 index.html文件
location / {
root html;
index index.html;
}
# 404页面配置，页面同样在html文件夹中
error_page 404 /404.html;
location = /404.html {
root html;
}
# 其他错误码页面配置
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 配置代理。由于项目是在本地起动的，而我们的request需要请求其他ip地址。如果你的request链接为localhost:8880/api/login?name=12345,那么下面配的就是location /api,最终会代理到 http://192.168.0.0:80/api/login?name=12345
location /api {
proxy_pass http://192.168.0.0:80;
}
# 一把前端不管用vue，还是react等框架，默认都是单页面的，如果你的项目是多页面的，则需要用到下面的配置。
# 因为此时你的浏览器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
# 所以我们需要将路径中a.html指向具体的html文件夹中的文件，因为默认是index.html
location /a.html {
alias html;
index a.html;
}
location /b.html{
alias html;
index b.html;
}
}1.1 gzip 压缩
#前面有很多，不关注多余的
http {
#前面有很多，不关注多余的
#开启gzip压缩
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 9;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
#后面有很多，不关注多余的
}
#后面有很多，不关注多余的此时你会在 chrome 的network中的 content-encoding的列上看到:有的请求已经有了gzip，当我们点击这个有gzip的请求后，会看到如下:在response header中多了一个 content-encoding:gzip.
那么也就说明这个请求已经被gzip压缩了，那么为什么有的没有gzip呢，因为他们的资源 小于1k，在上面配置文件中，我们配置了只有大于1k的才会被压缩。
鼠标浮到 http的请求size上，会出现个hover，可以看到原本有1.5k大小的请求，被压缩后，只有992b。几乎缩小了一倍。
这对于前段开发来说，将大大减小http请求的响应时间，进而影响页面的响应速度。
1.2 cache缓存
如果不设置 cache缓存，则可以看到response header为下面:
此时我们跳到其他页面，再进入刚才的页面，会发现重新发了个一个一模一样的请求
然后我们在nginx中设置缓存。
location /api {
proxy_pass http://192.168.0.0:80;
#expires作用于http, server, location。 可以控制HTTP应答中的“Expires”和“Cache-Control”的头标（起到控制页面缓存的作用）。
#如果expires为-1s，即永远过期，则reponse header为Cache-Control: no-cache， 当expires为正值，则header为Cache-Control: max-age = #
expires 1d;
}此时我们发现 reponse header中多了两个属性，这是由nginx自动加的
然后我们跳到其他页面后，再回到上次的页面，发现这个请求并没有缓存。size的位置还是有值。
通过阅读 mdn 发现，缓存是能对 get请求生效，而对post不生效。
cache-control FAQ MDN
那我们找个get请求，比如登录时的获取验证码。
然后我们再次点击刷新验证码。会发现size位置变成了 disk cache， 浮到disk cache的位置。这就说明是从 缓存里获取的。观察验证码，确实也没有变化。
第三步: 将build好的内容放到nginx下的html文件夹下
只需要dist下的内容，如
clipboard.png
第四步: 启动nginx服务器
在路径下右键，打开命令号工具，并输入
>start nginx然后在浏览器地址栏输入
localhost:8880即可
第五步: 停止nginx服务器
>nginx -s stop注意事项
1、在修改nginx.conf文件时，每行的末尾必须带有分好";"，否则会报错。2、有些命令行工具在执行start nginx后，一闪而过，所以你并不知道到底启动了还是没有，可以运行下面的命令:
tasklist /fi "imagename eq nginx.exe"结果类似于这样
3、如果你运行nginx -s stop命令后，再次运行tasklist /fi "imagename eq nginx.exe"命令发现还是有进程，并没有停止，可以访问任务管理器，然后结束进程
