前言

上篇说到如何配置Nginx负载均衡、upstream中备用server及静态黑命单，本篇是Nginx专栏第四篇， 记录如何用Nginx代理一个Vue项目。正在学习Ngxin的同学，可以订阅下Nginx专栏, 咱们一步步由浅至深精通Nginx。

一、上传Vue打包后的文件dist

1. 先执行npm rum build 讲Vue项目构建好
2. 构建好的Vue项目默认是一个dist文件
3. 将dist文件上传到服务器目录 /data/web/myvue/
4. 完整的path即为 /data/web/myvue/dist

二、编辑nginx.conf

> vim /usr/local/nginx/conf/nginx.conf
  http {
		server {
			listen       80;  
			server_name  *.domain.cn;  # 你自己的域名
			root   /data/web/myvue/dist;  #vue文件dist的完整路径
			sendfile        on;
			tcp_nopush      on;
			default_type text/html;
			
			location / {
				index  /index.html;
				try_files $uri $uri/ /index.html;
	        }
	
			error_page   500 502 503 504  /50x.html;
			location = /50x.html {
				root   html;
			}
		}
  }
> /usr/local/nginx/sbin/nginx -t    # 测试成功再执行下面的语句
> /usr/local/nginx/sbin/nginx -s reload   

三、 访问查看效果

1. 打开浏览器, 输入nginx.conf中自己配置的域名
2. 访问后可以看到dist下index.html的渲染内容.就成功了.

总结

本篇是Nginx专栏第四篇， 记录如何用Nginx代理一个Vue项目。