第一步：下载nginxnginxdownload从官网地址下载后，解压到本地任意目录。此时我们可以看到如下目录：把我们前端构建的代码放到html路径下（怎么构建，相信大家就知道了），conf下有一个很重要的文件nginx.conf，用来配置nginx服务器。第二步：配置nginx服务器打开nginx.conf文件，直接找到配置服务器的地方，把暂时不用的配置取消掉。下面是我的配置：server{#启动后的端口listen8880;#启动时的端口地址server_namelocalhost;#启动后在地址栏输入：localhost:8880，默认会在html文件夹下找到index.html文件。位置/{根html;索引index.html；}#404页面配置，页面也在html文件夹error_page404/404.html;location=/404.html{根html;}#其他错误码页面配置error_page500502503504/50x.html;location=/50x.html{根html;}#配置代理。由于项目是在本地启动的，所以我们的请求需要请求其他ip地址。如果你的请求链接是localhost:8880/api/login?name=12345，那么下面的配置就是location/api，最终会代理到http://192.168.0.0:80/api/login?name=12345location/api{proxy_passhttp://192.168.0.0:80;}#前端不管是vue还是react等框架，默认都是单页的。如果你的项目是多页的，需要使用如下配置。#因为此时你浏览器的url不是localhost:8880/#/login，而是localhost:8880/a.html/#/login#所以我们需要在路径中指向a.html具体的html文件夹文件,因为默认是index.htmllocation/a.html{别名html;索引a.html；}location/b.html{别名html;索引b.html；}}1.1gzip压缩#前面有很多，不要注意冗余http{#前面有很多，不要注意多余的#打开gzip压缩gzipon;#启用gzip压缩最小文件，小于设定值的文件不压缩gzip_min_length1k;#gzip压缩级别，1-9，数字越大压缩越好，占用CPU时间越多。稍后将给出详细信息。gzip_comp_level9；#要压缩的文件类型。JavaScript有多种形式。这些值可以在mime.types文件中找到。gzip_types文本/普通应用程序/json应用程序/javascript应用程序/x-javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png应用程序/vnd.ms-fontobject字体/ttf字体/opentype字体/x-woff图像/svg+xml；#是否在http头中添加Vary:Accept-Encoding，建议开启gzip_varyon；#后面很多，不要注意多余的}#后面很多，不要注意多余的这时候会在content-encoding一栏看到inchrome网络：有些请求已经有gzip，当我们点击带有gzip的请求时，我们会看到：响应头content-encoding中多了一个：gzip。那么说明这个请求已经被gzip压缩过了，那为什么有的没有gzip呢，因为他们的资源都是小于1k的，在上面的配置文件中，我们配置了只有大于1k的才会被压缩。当鼠标悬停在http请求大小上时，会出现悬停，可以看到原来1.5k的请求大小压缩后只有992b。体积几乎翻了一番。对于前端开发来说，这会大大减少http请求的响应时间，进而影响页面的响应速度。1.2缓存如果不设置缓存，可以看到响应头如下：这时，我们跳转到其他页面，再进入刚才的页面，会发现重发了一个一模一样的请求，并且然后我们在nginx中设置缓存。location/api{proxy_passhttp://192.168.0.0:80;#expires作用于http、服务器、位置。您可以控制HTTP响应中的“Expires”和“Cache-Control”标头（起到控制页面缓存的作用）。#如果expires为-1s，即永远expires，则响应头为Cache-Control:no-cache，当expires为正时，header为Cache-Control:max-age=#expires1d;}此时我们发现responseheader中多了两个属性，是nginx自动添加的。我们跳转到其他页面后，返回到最后一个页面，发现这个请求并没有被缓存。size的位置还是有价值的。通过阅读mdn，发现缓存对get请求可以生效，但是对post不生效。cache-controlFAQMDN我们找一个get请求，比如登录时获取一个验证码。然后我们再次点击刷新验证码。会发现size位置变成了diskcache，浮动到diskcache位置。这意味着它是从缓存中获取的。观察验证码，确实没有变化。第三步：将构建的内容放在nginx下的html文件夹中，只需要dist下的内容，如第四步：启动nginx服务器，路径下右键，打开命令号工具，输入>startnginx，然后在浏览器地址栏输入localhost:8880第五步：停止nginx服务器>nginx-sstop注意事项1.修改nginx.conf文件时，必须有一个“;”每行末尾，否则会报错。2、有些命令行工具执行startnginx后会闪现，不知道有没有启动。可以运行如下命令：tasklist/fi"imagenameeqnginx.exe"结果与此类似3.如果运行nginx-sstop命令，再次运行tasklist/fi"imagenameeqnginx.exe"命令发现还有一个进程没有停止，可以进入任务管理器，结束进程
