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/; 当拦截到需要处理的请求时，将拦截请求代理到的 接口地址。

转载于:https://juejin.im/post/5b4489016fb9a04f8d6ba269