本文已参与「新人创作礼」活动，一 起开启掘金创作之路。
Windows使用Nginx部署Vue项目，动静分离配置
为什么要动静分离？
Nginx是当下最热的Web容器，网站优化的重要点在于静态化网站，网站静态化的关键点则是是动静分离，动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们则根据静态资源的特点将其做缓存操作。
让静态的资源只走静态资源服务器，动态的走动态的服务器
Nginx的静态处理能力很强，但是动态处理能力不足，因此，在企业中常用动静分离技术。
- 对于静态资源比如图片，js，css等文件，我们则在反向代理服务器nginx中进行缓存。这样浏览器在请求一个静态资源时，代理服务器nginx就可以直接处理，无需将请求转发给后端服务器tomcat。
- 若用户请求的动态文件，比如servlet,jsp则转发给Tomcat服务器处理，从而实现动静分离。这也是反向代理服务器的一个重要的作用。
1.打包Vue项目
npm run build
打包完成后会得到一个【dist】静态资源
2.下载nginx压缩包
nginx下载
我这里下载的是windows稳定版
解压点击nginx.exe启动，访问localhost出现下面提示，说明启动成功
3.部署vue到nginx
把打包vue生成的dist文件夹复制到nginx的html目录下
进入conf目录，打开nginx.conf文件，置nginx跳转路径，将路径修改成我们项目的访问路径
测试访问成功
此时我们刷新页面会出现404
此时我们需要加一个配置try_files uri/ /index.html;处理页面刷新404，配置保存后记得重启nginx
nginx.exe -s reload
location / {
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
4.nginx常用命令
运行命令前需要先跳转到目录nginx，文件夹敲cmd回车，可以快速定位到该路径。
//启动nginx
start nginx
//停止nginx
nginx.exe -s stop
//重启nginx
nginx.exe -s reload
//强制关闭所有nginx
taskkill /IM nginx.exe /F
//查看nginx版本
nginx -v
前后端分离配置后端接口，prod-api是访问后端的api前缀，
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
动静分离配置
动静分离，通过中间件将动态请求和静态请求进行分离，分离资源，减少不必要的请求消耗，减少请求延时。
好处：动静分离后，即使动态服务不可用，但静态资源不会受到影响
通过中间件可以将动态请求和静态请求进行分离
location / {
#页面路径
root C:\\Users\\TANGSHUAI\\Desktop\\Nginx\\nginx-1.12.2\\html\\static;
index index.html index.htm;
}
#配置静态资源路径
location ~\.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root C:\\Users\\TANGSHUAI\\Desktop\\Nginx\\image;
}
nginx用的80端口，直接访问image下面的图片
