使用Nginx部署Vue項目全過程及踩坑記錄
Nginx部署Vue項目
很多小伙伴在做完Vue項目之后，想要部署到服務(wù)器上自己運行試試。
其實使用Nginx就可以輕松的做到，并且實現(xiàn)請求轉(zhuǎn)發(fā)等功能。下面來看看使用步驟吧。
使用Nignx部署Vue項目步驟
1.打包Vue項目
npm run build
首先使用打包命令打包Vue項目，之后得到一個dist文件夾。
這里面存放的是已經(jīng)打包好的靜態(tài)資源文件。
注意：這里不同的項目打包的命令可能不一樣，需要在 package.json 里看 scripts，每個屬性就是一個命令，一般都會有 npm run serve, npm run build, npm run lint… 等等
不同的項目結(jié)構(gòu)不一樣哦。我使用的是vue-element-admin框架。具體打包方法可以查看框架的相關(guān)文檔哦。
2.復(fù)制dist文件夾到Vue默認(rèn)目錄
安裝好Nginx，找到安裝根目錄。將dist目錄里的文件復(fù)制到html中。
這是默認(rèn)的nginx根目錄，如果這樣做的話你不用修改配置文件就可以直接運行。
復(fù)制完成后，雙擊nginx.exe運行nginx就可以運行啦。
3.高級配置
通常情況下ngxin是安裝到單獨的服務(wù)器上，因此一般是把vue打包后的dist仍到服務(wù)上的具體位置，然后修改nginx.conf的root路徑來指向我們的dist。
如果你想根據(jù)自己的需求來配置nginx，或者想部署多個項目的話。你需要通過修改配置文件來完成。
這里放一個我自己的配置。具體可以參考注釋。
server {
# 需要被監(jiān)聽的端口號，前提是此端口號沒有被占用，否則在重啟 Nginx 時會報錯
listen 8888;
# 服務(wù)名稱，無所謂
server_name localhost;
# 上述端口指向的根目錄
root /opt/asing1elife/teamnote;
# 項目根目錄中指向項目首頁
index index.html;
client_max_body_size 20m;
client_body_buffer_size 128k;
# 根請求會指向的頁面
location / {
# 此處的 @router 實際上是引用下面的轉(zhuǎn)發(fā)，否則在 Vue 路由刷新時可能會拋出 404
try_files $uri $uri/ @router;
# 請求指向的首頁
index index.html;
}
# 由于路由的資源不一定是真實的路徑，無法找到具體文件
# 所以需要將請求重寫到 index.html 中，然后交給真正的 Vue 路由處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
# 關(guān)鍵步驟，這里表示將所有的 http://192.168.7.8:8888/teamnote/api/ 開頭的請求都轉(zhuǎn)發(fā)到下面 proxy_pass 指定的鏈接中
# 這里使用 /teamnote/api/ 而不是 /teamnote/ ，是因為前端項目本身的訪問鏈接就是 http:192.168.7.8:8888/teamnote/
# 為了防止在訪問頁面時請求就被 Nginx 代理轉(zhuǎn)發(fā)，這里需要更具體的配置，才能和前端訪問請求區(qū)分開
location /teamnote/api/ {
# 后端的真實接口
proxy_pass http://192.168.7.8:2592/teamnote/api/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie;
# for Ajax
#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header x-requested-with $http_x_requested_with;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
}
重新啟動 Nginx
- 使用
nginx -s reload可以重新加載 Nginx 的配置文件，但如果配置文件有錯，不一定會拋出異常 - 使用
nginx -s stop先停止 Nginx 服務(wù)，再使用nginx嘗試啟動 Nginx 服務(wù)，如果配置文件有異常，則會拋出異常告知啟動失敗
linux環(huán)境
通常情況下很少使用windows來作為nginx的服務(wù)器，一般使用linux。
對于linux安裝nginx有兩種方式
- 一種是使用官方已經(jīng)編譯好的包來安裝
- 一種是使用源碼構(gòu)建安裝
第一種方式參考官方地址https://nginx.org/en/linux_packages.html#stable
第二種方式參考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，這種實際上就是下一個tar.gz包仍到linux服務(wù)去自己編譯。
在linux服務(wù)上和window環(huán)境上使用nginx部署vue項目并沒有太大差異，把構(gòu)建好的vue項目dist上傳到linux服務(wù)上，通用修改nginx服務(wù)器中的root來指向dist就ok了，然后使用
# centos 7 systemctl restart nginx.service # centos 6 service nginx restart
或者是平滑重啟
service nginx reload
centos 7
systemctl restart nginx.service
centos 6
service nginx restart
或者是平滑重啟
service nginx reload
當(dāng)然，我更推薦寶塔面板，操作簡介方便！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在window 上安裝了nginx ,對nginx 的操作不是很熟，故在此記錄一下常用操作，本文詳細(xì)介紹了Windows下Nginx的啟動，停止，重啟等命令,需要的朋友可以參考下2024-03-03
nginx配置proxy_pass中url末尾帶/與不帶/的區(qū)別詳解
這篇文章主要介紹了nginx配置proxy_pass中url末尾帶/與不帶/的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
本文只針對Nginx在不加載第三方模塊的情況能處理哪些事情，由于第三方模塊太多所以也介紹不完，當(dāng)然本文本身也可能介紹的不完整，具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-10-10
keepalived+lvs 對nginx做負(fù)載均衡和高可用的操作方法
這篇文章主要介紹了keepalived+lvs 對nginx做負(fù)載均衡和高可用的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
gzip(GNU-ZIP)是一種壓縮技術(shù)。經(jīng)過gzip壓縮后頁面大小可以變?yōu)樵瓉淼?0%甚至更小，這樣，用戶瀏覽頁面的時候速度會塊得多，下面看一下Nginx配置Gzip的方法2013-12-12
本文詳細(xì)講解了前端異常502?bad?gateway的原因和解決辦法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2021-12-12
Nginx 是一個高性能的 Web 服務(wù)器，從 2001 年發(fā)展至今，由于 Nginx 對硬件和操作系統(tǒng)內(nèi)核特性的深度挖掘，使得在保持高并發(fā)的同時還能夠保持高吞吐量，這篇文章主要介紹了Nginx 命令行控制,需要的朋友可以參考下2022-10-10
Nginx+cpolar實現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點端口的步驟詳解
這篇文章主要給大家介紹了Nginx+cpolar實現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點端口的詳細(xì)步驟,文章通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了詳解Nginx反向代理到Tomcat服務(wù)器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文給大家分享Nginx源碼編譯安裝過程，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11