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/; 當攔截到須要處理的請求時，將攔截請求代理到的 接口地址。