1、打包前端項(xiàng)目

npm run build

執(zhí)行完后會(huì)在根目錄下生成一個(gè)dist文件夾，這個(gè)dist文件夾就是我們需要的東西

2、將dist包上傳到服務(wù)器

自己建一個(gè)目錄，上傳即可（盡量不要在root目錄下，可能涉及權(quán)限問題）

3、安裝并配置nginx

3.1、在安裝nginx前需要先安裝安裝gcc、pcre-devel、zlib-devel、openssl-devel

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

3.2、下載nginx

下載地址：Index of /download/ (nginx.org)

下載“nginx-1.9.9.tar.gz”，移動(dòng)到/usr/local/下

cd /usr/local/

注：也可以先進(jìn)入到上述目錄，然后執(zhí)行下面這條命令一鍵下載tar包，更方便

wget http://nginx.org/download/nginx-1.9.9.tar.gz

 解壓

tar -zxvf nginx-1.9.9.tar.gz

進(jìn)入nginx目錄

cd nginx-1.9.9

進(jìn)行配置

下面三條命令依次執(zhí)行，上一個(gè)執(zhí)行完后再執(zhí)行下一個(gè)

./configure --prefix=/usr/local/nginx

make

make install

注：這里編譯的時(shí)候如果出現(xiàn)如下圖所示的錯(cuò)誤，說明gcc把警告當(dāng)成錯(cuò)誤處理了

我們進(jìn)入 /usr/local/nginx-1.9.9/objs/ 目錄，找到Makefile文件，將下圖所示 -Werror去掉即可

如果出現(xiàn)下面這個(gè)錯(cuò)誤，則根據(jù)錯(cuò)誤日志找到對(duì)應(yīng)的文件將這一行注釋即可（目前網(wǎng)絡(luò)上搜尋的都是這種解決辦法）

補(bǔ)：這個(gè)教程我在四臺(tái)服務(wù)器上都試了，只有其中一臺(tái)出現(xiàn)了上述兩個(gè)問題，由于知識(shí)淺薄，確實(shí)沒能深究原因，若有前輩知道原因，歡迎加文末聯(lián)系方式或評(píng)論區(qū)指導(dǎo)，感激不盡！ 

3.3、修改配置文件

進(jìn)入下面這個(gè)目錄進(jìn)行修改

vim /usr/local/nginx/conf/nginx.conf

需要修改以下四處，當(dāng)然，你自己會(huì)的話隨意，不會(huì)的話按我的來(lái)

需要注意的是dist文件夾盡量放在根目錄下自己建的文件夾里，不要放在root里，可能會(huì)涉及權(quán)限問題，導(dǎo)致前端報(bào)錯(cuò)403

注：如果抓包發(fā)現(xiàn)請(qǐng)求返回html頁(yè)面，不是正常返回響應(yīng)，說明你不是幸運(yùn)兒，你需要正常寫請(qǐng)求轉(zhuǎn)發(fā)的配置文件，看文末

4、啟動(dòng)nginx

cd /usr/local/nginx/sbin
./nginx //啟動(dòng)nginx

5、當(dāng)之后每次修改配置文件后，nginx都要進(jìn)行重啟 

# 未配置環(huán)境變量使用絕對(duì)路徑運(yùn)行
/usr/local/nginx/sbin/nginx -s reload

常見錯(cuò)誤解決辦法

403

權(quán)限問題

估計(jì)你的dist項(xiàng)目放在root目錄里了

在根目錄下創(chuàng)建一個(gè)文件夾，將dist文件夾放到這個(gè)文件夾下，記得修改配置文件，然后重啟nginx

404

沒找到文件夾

先自己看一下配置文件，dist文件夾位置，index等是否正確，如果都正確，先重啟一下nginx，清除瀏覽器緩存，再嘗試訪問，如果依然不行，則在nginx配置文件中加入下面這句話

try_files $uri $uri/ /index.html;

注意我的位置，不要添加錯(cuò)誤，添加完后保存配置文件，然后重啟nginx，理論上就可以了

請(qǐng)求返回html代碼

請(qǐng)求返回html代碼，不是正常返回響應(yīng)，說明請(qǐng)求沒正常到達(dá)后端，需要配置請(qǐng)求轉(zhuǎn)發(fā)，如下：

/auth/表示請(qǐng)求中帶atuh的請(qǐng)求都將其轉(zhuǎn)發(fā)到 http://192.168.17.128:5000

假如我正常的url是 

http://192.168.17.128:5173/auth/user/doLogin?validCode=308

那么轉(zhuǎn)發(fā)后的url就是

http://192.168.17.128:5000/auth/user/doLogin?validCode=308

根據(jù)自己的項(xiàng)目合理配置即可

總結(jié)

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

最新評(píng)論