由于之前自己一直是在本地開發(fā)，開發(fā)完之后也只是執(zhí)行npm run build直接放在指定的位置，并沒有過多的考慮項(xiàng)目是如何在服務(wù)器上跑起來，這次是自己一個(gè)人負(fù)責(zé)從頭搭建到部署到服務(wù)器上，所以開始考慮和更深入的了解這方面的知識。
在部署的時(shí)候首先遇到的問題是俐载，在本地開發(fā)時(shí)我使用了vue-cli自動(dòng)生成的proxyTable解決的代理轉(zhuǎn)發(fā)和跨域問題，但是真正build出來放在服務(wù)器上時(shí)再去訪問后臺接口就會報(bào)404登失，因?yàn)榍岸舜a和后臺代碼不在同一個(gè)服務(wù)器上遏佣，而且在服務(wù)器上沒有做代理轉(zhuǎn)發(fā)，在服務(wù)器上訪問的接口是服務(wù)器的IP+接口地址揽浙，而不是后臺的IP+接口地址状婶，這樣就造成了404意敛，我使用的解決方式是使用nginx做的代理轉(zhuǎn)發(fā)請求和后臺修改跨域。因?yàn)閚ginx在轉(zhuǎn)發(fā)代理使用時(shí)請求頭部就會不起作用膛虫。
如何配置nginx做代理轉(zhuǎn)發(fā)呢草姻？
server {
#配置HTTP服務(wù)器監(jiān)聽的端口號，這里默認(rèn)寫為8880
listen? ? ? 8880;
server_name 此處是你的服務(wù)器IP;
location / {
#替換下面的地址為您網(wǎng)頁目錄地址
add_header Access-Control-Allow-Origin *;
#該位置是你的網(wǎng)頁目錄地址稍刀，例如我的dist文件的位置是/home/user/dist
root /home/user/dist
index? index.html index.htm;
}
error_page? 500 502 503 504? /50x.html;
location = /50x.html {
root? html;
}
#下面配置Tomcat或WAS服務(wù)器的地址撩独，服務(wù)程序會自動(dòng)進(jìn)行代理轉(zhuǎn)發(fā)
#下面就是代理轉(zhuǎn)發(fā)，當(dāng)遇到請求中帶有api時(shí)就換將api前面的內(nèi)容账月，包括api综膀，替換成下面的proxy_pass，proxy_pass地址輸入的是后臺接口的IP地址局齿，比如我需要聯(lián)調(diào)的后臺接口地址是：http://10.120.189.181:8080/僧须。
location ^~ /api/ {
proxy_pass http://10.120.189.181:8080/;
}
}
記住：vue項(xiàng)目部署的時(shí)候build出來的是一個(gè)靜態(tài)文件项炼，我們只需要使用nginx做一下指向，指向dist文件下的index.html即可示绊。如果前端代碼和后臺代碼不在一個(gè)服務(wù)器上就需要使用nginx做一個(gè)代理轉(zhuǎn)發(fā)和跨域處理锭部。如果前端代碼和后臺代碼在一個(gè)服務(wù)器上，就不需要做代理轉(zhuǎn)發(fā)和跨域處理面褐。
