Nginx部署vue項(xiàng)目和配置代理的問題解析
1.nginx安裝和啟動(dòng)
# 安裝nginx sudo apt-get install nginx # 啟動(dòng) sudo service nginx start
驗(yàn)證安裝
# 安裝完成后使用nginx -v檢查，如果輸出nginx的版本信息表明安裝成功 nginx -v # 如果輸出類似于這樣的版本號等，證明安裝完成 nginx version: nginx/1.14.0 (Ubuntu)
2.修改nginx配置文件，部署項(xiàng)目
查看nginx的配置，linux系統(tǒng)下的配置文件通常會(huì)存放在/etc目錄下的nginx目錄
nginx的配置文件就在/etc/nginx文件夾，打開文件/etc/nginx/sites-available/default
（nginx可以有多個(gè)配置文件，通常我們配置nginx也是修改這個(gè)文件）
使用連接工具自帶的編輯器打開或者vim
修改如下兩個(gè)地方即可成功部署項(xiàng)目
檢查nginx配置是否正確
sudo nginx -t
出現(xiàn) successful 即可
nginx: configuration file /etc/nginx/nginx.conf test is successful
加載nginx配置
sudo nginx -s reload
如果項(xiàng)目配置了api跨域，請繼續(xù)往下看第3點(diǎn)，反之直接第4點(diǎn)訪問項(xiàng)目即可
3.配置代理api
一般前后端分離的項(xiàng)目需要進(jìn)行跨域
還是/etc/nginx/sites-available/default文件編輯
#vue項(xiàng)目中的請求地址前面都需要加上api
#發(fā)起請求的代理配置，地址包含/api的回全部替換地址并轉(zhuǎn)發(fā)到proxy_pass下的地址
location /api/ {
rewrite ^/b/(.*)$ /$1 break;
proxy_pass http://www.ifyyf.com/;
}
如圖
即可代理到原來vue.config.js的跨域代理了
4.訪問項(xiàng)目即可
打開服務(wù)器的ip或者域名訪問項(xiàng)目即可
5.二級菜單404問題
vim打開default文件
將
try_ files $uri $uri/ =404;
修改為
try_ files $uri $uri/ /index.html;
到此這篇關(guān)于Nginx部署vue項(xiàng)目和配置代理的文章就介紹到這了,更多相關(guān)Nginx部署vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Nginx 啟用 OCSP Stapling的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了Nginx多虛擬主機(jī)配置小結(jié)2024-05-05
這篇文章主要介紹了Nginx配置-日志格式配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了用ELK來分析Nginx服務(wù)器日志的方法,ELK是三個(gè)開源軟件的縮寫,分別表示Elasticsearch,Logstash,Kibana,需要的朋友可以參考下2016-03-03
Nginx + Tomcat實(shí)現(xiàn)請求動(dòng)態(tài)數(shù)據(jù)和請求靜態(tài)資源的分離詳解
這篇文章主要給大家介紹了關(guān)于Nginx + Tomcat實(shí)現(xiàn)請求動(dòng)態(tài)數(shù)據(jù)和請求靜態(tài)資源的分離的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了Nginx配置文件nginx.conf的常用配置方法,作為剛開始著手搭建Nginx服務(wù)器的一個(gè)指南,需要的朋友可以參考下2015-07-07
nginx正向代理http和https的實(shí)現(xiàn)步驟
本文主要介紹了nginx正向代理http和https的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Nginx是一款高性能、異步非阻塞工作模式、輕量級Web服務(wù)軟件，這篇文章主要介紹了Nginx網(wǎng)站服務(wù)的相關(guān)知識,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Nginx鑒權(quán)、限流問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
今天來聊一聊他的正則表達(dá)式的使用規(guī)則,我會(huì)簡單的舉幾個(gè)例子然后進(jìn)行說明講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10