1.nginx安裝和啟動(dòng)

# 安裝nginx
sudo apt-get install nginx
# 啟動(dòng)
sudo service nginx start

驗(yàn)證安裝

# 安裝完成后使用nginx -v檢查，如果輸出nginx的版本信息表明安裝成功
nginx -v
# 如果輸出類似于這樣的版本號(hào)等，證明安裝完成
nginx version: nginx/1.14.0 (Ubuntu)

2.修改nginx配置文件，部署項(xiàng)目

查看nginx的配置，linux系統(tǒng)下的配置文件通常會(huì)存放在/etc目錄下的nginx目錄
nginx的配置文件就在/etc/nginx文件夾，打開(kāi)文件/etc/nginx/sites-available/default
（nginx可以有多個(gè)配置文件，通常我們配置nginx也是修改這個(gè)文件）

使用連接工具自帶的編輯器打開(kāi)或者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跨域，請(qǐng)繼續(xù)往下看第3點(diǎn)，反之直接第4點(diǎn)訪問(wèn)項(xiàng)目即可

3.配置代理api

一般前后端分離的項(xiàng)目需要進(jìn)行跨域

還是/etc/nginx/sites-available/default文件編輯

#vue項(xiàng)目中的請(qǐng)求地址前面都需要加上api
#發(fā)起請(qǐng)求的代理配置，地址包含/api的回全部替換地址并轉(zhuǎn)發(fā)到proxy_pass下的地址
location /api/ {
 		rewrite ^/b/(.*)$ /$1 break;
 		proxy_pass http://www.ifyyf.com/; 	
	}

如圖

即可代理到原來(lái)vue.config.js的跨域代理了

4.訪問(wèn)項(xiàng)目即可

打開(kāi)服務(wù)器的ip或者域名訪問(wèn)項(xiàng)目即可

5.二級(jí)菜單404問(wèn)題

vim打開(kāi)default文件
將

try_ files $uri $uri/ =404;

修改為

try_ files $uri $uri/ /index.html;

到此這篇關(guān)于Nginx部署vue項(xiàng)目和配置代理的文章就介紹到這了,更多相關(guān)Nginx部署vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站！

版權(quán)聲明：本站文章來(lái)源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來(lái)源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來(lái)源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來(lái)，僅供學(xué)習(xí)參考，不代表本站立場(chǎng)，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。