Windows使用Nginx部署Vue项目，动静分离配置

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 $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下面的图片