1、打包前端項目

npm run build

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

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

自己建一個目錄，上傳即可（盡量不要在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”，移動到/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í)行，上一個執(zhí)行完后再執(zhí)行下一個

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

make

make install

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

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

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

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

3.3、修改配置文件

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

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

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

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

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

4、啟動nginx

cd /usr/local/nginx/sbin
./nginx //啟動nginx

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

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

常見錯誤解決辦法

403

權(quán)限問題

估計你的dist項目放在root目錄里了

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

404

沒找到文件夾

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

try_files $uri $uri/ /index.html;

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

請求返回html代碼

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

/auth/表示請求中帶atuh的請求都將其轉(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ù)自己的項目合理配置即可

總結(jié)

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

最新評論