vue 项目打包部署，经过nginx 解决跨域问题

     最近将公司vue 项目打包部署服务器时，产生了一点小插曲，开发环境中配置的跨域在将项目打包为静态文件时是没有用的 ，就想到了用 nginx 经过反向代理的方式解决这个问题，经过搜索引擎查阅相关资料，结合其精华就产生了这篇文章，有很差的地方还望理解。

前提条件

liunx 下 nginx 安装配置（将不作多的阐述，请自行百度）

配置nginx

• 经过 Xshell 链接 liunx 服务器 ，打开 nginx.conf 配置文件，或经过 WinSCP 直接打开并编辑nginx.conf文件 ，这里我选择后者 。（具体配置文件的路径根据你安装时决定）

• 在配置文件中新增一个server

# 新增的服务 
	# 新增的服务
	server {
		listen       8086; # 监听的端口
		server_name 47.106.197.89; # 能够随便起，尽可能有意义

		location / {
			root /home/;  # vue 打包后静态文件存放的地址
			index index.html; # 默认主页地址
		}
	
		location /operateSysApi {
			proxy_pass http://47.106.197.89:9093/; # 代理接口地址
		}
	
		location /csmsApi {
			proxy_pass http://47.106.197.89:9096/; # 代理接口地址
		}
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   html;
		}

	}
复制代码

• 解释说明

1. root /home/; 的含义，这里配置的路径 /home/是我当前将vue 文件打包后存放在 liunx下的路径 ，具体的路径模板为 /home/mySystemManage, 当咱们启动 nginx 后 就能够经过 http://ip地址:8086/mySystemManage 访问到vue 打包的静态文件。mySystemManage 文件格式为以下图 图示 - 1：

   

2.location /operateSysApi 指拦截以 operateSysApi 开头的请求，http请求格式为 http://ip地址:8086/operateSysApi/***。

3. proxy_pass http://47.106.197.89:9093/; 当拦截到须要处理的请求时，将拦截请求代理到的 接口地址。