Nginx部署vue項(xiàng)目和配置代理的問(wèn)題解析
1.nginx安裝和啟動(dòng)
# 安裝nginx sudo apt-get install nginx # 啟動(dòng) sudo service nginx start
驗(yàn)證安裝
# 安裝完成后使用nginx -v檢查，如果輸出nginx的版本信息表明安裝成功 nginx -v # 如果輸出類(lèi)似于這樣的版本號(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)訪(fǎng)問(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.訪(fǎng)問(wèn)項(xiàng)目即可
打開(kāi)服務(wù)器的ip或者域名訪(fǎng)問(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Nginx配置文件中的變量的編寫(xiě)使用,包括從常用的rewrite等方面來(lái)深入變量的相關(guān)定義,需要的朋友可以參考下2016-01-01
Nginx配置SSL證書(shū)出現(xiàn)PEM_read_bio_PrivateKey() failed錯(cuò)誤解決
在配置GoDaddy的SSL證書(shū)并啟動(dòng)Nginx時(shí),可能遇到由于證書(shū)密鑰文件編碼問(wèn)題導(dǎo)致的啟動(dòng)失敗,具體表現(xiàn)為nginx報(bào)錯(cuò)：PEM_read_bio_PrivateKey() failed,本文就來(lái)介紹一下,感興趣的可以了解學(xué)習(xí)2024-10-10
通過(guò)Nginx代理轉(zhuǎn)發(fā)配置實(shí)現(xiàn)跨域的方法（API代理轉(zhuǎn)發(fā)）
這篇文章主要給大家介紹了關(guān)于如何通過(guò)Nginx代理轉(zhuǎn)發(fā)配置實(shí)現(xiàn)跨域（API代理轉(zhuǎn)發(fā)）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
使用Bash腳本和Logrotate實(shí)現(xiàn)Nginx日志切割的方法
Logrotate是一個(gè)Linux系統(tǒng)上用來(lái)管理日志文件的工具,它可以定期輪轉(zhuǎn)日志文件、壓縮舊的日志文件以及刪除過(guò)期的日志文件,這篇文章主要介紹了使用Bash腳本和Logrotate實(shí)現(xiàn)Nginx日志切割,需要的朋友可以參考下2024-05-05
在Rust開(kāi)發(fā)中,經(jīng)常需要使用Cargo從crates.io下載依賴(lài),而國(guó)內(nèi)幾乎沒(méi)有好用的crates.io鏡像,使用本文就來(lái)使用使用nginx搭建creates.io鏡像吧2023-12-12
詳解nginx服務(wù)器綁定域名和設(shè)置根目錄的方法
這篇文章主要介紹了詳解nginx服務(wù)器綁定域名和設(shè)置根目錄的方法，nginx服務(wù)器綁定域名以及設(shè)置根目錄非常方便，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要給大家介紹了關(guān)于Nginx http升級(jí)到https的完整步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Centos7 安裝Nginx整合Lua的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Nginx+IIS簡(jiǎn)單的部署教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Nginx實(shí)現(xiàn)正向代理實(shí)例,正向代理的作用在于正向代理隱藏了用戶(hù)，用戶(hù)的請(qǐng)求被代理服務(wù)器接收代替，到了服務(wù)器，服務(wù)器并不知道用戶(hù)是誰(shuí),需要的朋友可以參考下2023-08-08