很多項目的前端都使用vue編寫的，在項目上線部署的時候，有些項目要求把前端頁面和后台服務部署在不同的服務器，這就要求使用nginx代理，本文就來講講vue項目怎么使用nginx代理。
項目github地址：https://github.com/Little-Orange7/cmms-vue
一．本地開發配置
Vue項目本地開發，框架自帶了一個代理的工具，可以利用這個工具來模擬代理配置：
說明：
'/api': {// 請求接口中匹配到/api的接口，都統一走這個代理
這個是匹配請求接口的上下文路徑的，例如，頁面發起了一個登陸的接口請求：http://localhost:8080/api/sys/login.do，則會根據這個路徑中/api匹配到這里，在pathRewrite中，將/api替換為空字符串，然后將后面的/sys/login.do拼接到target后面，形成最終的請求路徑：http://localhost:8089/sys/login.do,然后按照這個路徑請求后台服務。
這樣的話，每一個請求后台的路徑前，都要添加一個/api；我使用的是axios發起請求的，所以配置一個統一的根路徑/api，配置如下：
二．Nginx代理配置
如果把vue頁面和后台服務放一個包里部署，則不需要使用nginx代理，下面可以忽略。
如果采用前后端分離部署，將vue和后台服務分開部署，則需要用nginx做代理，可以解決跨域問題；注意，本地開發的框架代理工具的配置，在build時是不會打包的。
下圖是我的nginx代理配置：
配置說明：
listen 8087;是監聽請求的端口，即瀏覽器訪問的端口
server_name 192.168.0.105;是請求的地址，即瀏覽器請求的地址，這里可以不用直接寫pi，用域名代替，如果需要用域名代替的，可以網上搜索，有很多相關的教程。
location則是對應的資源及代理服務；
需要注意的是，使用nginx代理配置，和本地配置有些不一樣，上面的”/”對應的是靜態資源，而”/api/”則對應的是請求后台服務的請求根路徑，和本地配置匹配規則是一樣的，所以需要在每一個接口請求的路徑加上根上下文/api/用來代理后台的服務；當匹配到對應的路徑了，就會按照規則代理到目標服務器上proxy_pass，和本地匹配規則一樣；
關於路徑匹配細節，可以查看我的[這篇博客](https://www.cnblogs.com/littleorange7/p/12850516.html)
需要注意的是proxy_cookie_path，這個是防止cookie跨域丟失，這個配置是針對響應response設置的，很多人可能誤理解為是針對請求request的設置，這個配置的語法如下：
語法： proxy_cookie_path path replacement;path就是你要替換的路徑 replacement 就是要替換的值 ；
以上述配置舉例：
前端發起一個請求：http://192.168.0.105:8087/api/login.do,
經過代理，請求后台的服務地址為http://192.168.0.105:8089/login.do,
后台處理完之后返回的時候，響應中攜帶的有cookie，對應的域為/，此時proxy_cookie_path將/對應的cookie的域path設置為/api，下次瀏覽器發路徑帶上下文/api的起請求，就會將對應的cookie一起攜帶，這樣就不會丟失cookie了。
項目github地址：https://github.com/Little-Orange7/cmms-vue