部署vue项目nginx配置

本期讲解vue项目使用nginx部署，当然也有用Tomcat部署，这里只讲解nginx部署
首先需要安装nginx，具体不详细记录，vue项目进行打包后上传到指定目录，nginx需要再 http{} 括号里面添加下面这段配置

linux部署vue项目nginx配置

server{
	listen       80;
	server_name  web.xudakj.com;

	location / {
	#跨域
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
			# 禁止OPTIONS
				return 204;
			}
			root  /root/article/web/dist; #文件存放地址
			try_files $uri $uri/ /index.html;
			index  index.html index.htm;
		}
	location /api{
	#跨域
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
			rewrite  ^/api/(.*)$ /$1 break; #下面有语法
			proxy_pass http://api.xudakj.com:8081;
		
	}

rewrite 语法

rewrite    <regex>    <replacement>    [flag];

关键字      正则        替代内容          flag标记

    关键字：其中关键字error_log不能改变

    正则：perl兼容正则表达式语句进行规则匹配

    替代内容：将正则匹配的内容替换成replacement

    flag标记：rewrite支持的flag标记

flag标记说明：

last  #本条规则匹配完成后，继续向下匹配新的location URI规则

break  #本条规则匹配完成即终止，不再匹配后面的任何规则

redirect  #返回302临时重定向，浏览器地址会显示跳转后的URL地址

permanent  #返回301永久重定向，浏览器地址栏会显示跳转后的URL地址