使用Nginx部署Vue項(xiàng)目全過程及踩坑記錄
Nginx部署Vue項(xiàng)目
很多小伙伴在做完Vue項(xiàng)目之后,想要部署到服務(wù)器上自己運(yùn)行試試。
其實(shí)使用Nginx就可以輕松的做到,并且實(shí)現(xiàn)請求轉(zhuǎn)發(fā)等功能。下面來看看使用步驟吧。
使用Nignx部署Vue項(xiàng)目步驟
1.打包Vue項(xiàng)目
npm run build
首先使用打包命令打包Vue項(xiàng)目,之后得到一個(gè)dist文件夾。
這里面存放的是已經(jīng)打包好的靜態(tài)資源文件。
注意:這里不同的項(xiàng)目打包的命令可能不一樣,需要在 package.json 里看 scripts,每個(gè)屬性就是一個(gè)命令,一般都會(huì)有 npm run serve, npm run build, npm run lint… 等等
不同的項(xiàng)目結(jié)構(gòu)不一樣哦。我使用的是vue-element-admin框架。具體打包方法可以查看框架的相關(guān)文檔哦。
2.復(fù)制dist文件夾到Vue默認(rèn)目錄
安裝好Nginx,找到安裝根目錄。將dist目錄里的文件復(fù)制到html中。
這是默認(rèn)的nginx根目錄,如果這樣做的話你不用修改配置文件就可以直接運(yùn)行。
復(fù)制完成后,雙擊nginx.exe運(yùn)行nginx就可以運(yùn)行啦。
3.高級(jí)配置
通常情況下ngxin是安裝到單獨(dú)的服務(wù)器上,因此一般是把vue打包后的dist仍到服務(wù)上的具體位置,然后修改nginx.conf的root路徑來指向我們的dist。
如果你想根據(jù)自己的需求來配置nginx,或者想部署多個(gè)項(xiàng)目的話。你需要通過修改配置文件來完成。
這里放一個(gè)我自己的配置。具體可以參考注釋。
server { # 需要被監(jiān)聽的端口號(hào),前提是此端口號(hào)沒有被占用,否則在重啟 Nginx 時(shí)會(huì)報(bào)錯(cuò) listen 8888; # 服務(wù)名稱,無所謂 server_name localhost; # 上述端口指向的根目錄 root /opt/asing1elife/teamnote; # 項(xiàng)目根目錄中指向項(xiàng)目首頁 index index.html; client_max_body_size 20m; client_body_buffer_size 128k; # 根請求會(huì)指向的頁面 location / { # 此處的 @router 實(shí)際上是引用下面的轉(zhuǎn)發(fā),否則在 Vue 路由刷新時(shí)可能會(huì)拋出 404 try_files $uri $uri/ @router; # 請求指向的首頁 index index.html; } # 由于路由的資源不一定是真實(shí)的路徑,無法找到具體文件 # 所以需要將請求重寫到 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/ ,是因?yàn)榍岸隧?xiàng)目本身的訪問鏈接就是 http:192.168.7.8:8888/teamnote/ # 為了防止在訪問頁面時(shí)請求就被 Nginx 代理轉(zhuǎn)發(fā),這里需要更具體的配置,才能和前端訪問請求區(qū)分開 location /teamnote/api/ { # 后端的真實(shí)接口 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; } }
重新啟動(dòng) Nginx
- 使用
nginx -s reload
可以重新加載 Nginx 的配置文件,但如果配置文件有錯(cuò),不一定會(huì)拋出異常 - 使用
nginx -s stop
先停止 Nginx 服務(wù),再使用nginx
嘗試啟動(dòng) Nginx 服務(wù),如果配置文件有異常,則會(huì)拋出異常告知啟動(dòng)失敗
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片段,這種實(shí)際上就是下一個(gè)tar.gz包仍到linux服務(wù)去自己編譯。
在linux服務(wù)上和window環(huán)境上使用nginx部署vue項(xiàng)目并沒有太大差異,把構(gòu)建好的vue項(xiàng)目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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Nginx實(shí)現(xiàn)http自動(dòng)跳轉(zhuǎn)到https
本文主要介紹了Nginx實(shí)現(xiàn)http自動(dòng)跳轉(zhuǎn)到https,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01詳解Nginx服務(wù)器中的nginx.conf配置文件
這篇文章主要介紹了詳解Nginx服務(wù)器中的nginx.conf配置文件,包括對HTTP服務(wù)的基本配置方法,需要的朋友可以參考下2015-08-08nginx部署vue項(xiàng)目的詳細(xì)圖文教程
很多小伙伴在做完Vue項(xiàng)目之后,想要部署到服務(wù)器上自己運(yùn)行試試,下面這篇文章主要給大家介紹了關(guān)于nginx部署vue項(xiàng)目的詳細(xì)圖文教程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09nginx配置客戶端保存cookie的實(shí)現(xiàn)
本文主要介紹了nginx配置客戶端保存cookie的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03Nginx 實(shí)現(xiàn) TCP/DUP流量按 IP 動(dòng)態(tài)轉(zhuǎn)發(fā)操作方法
為優(yōu)化網(wǎng)絡(luò)性能和提升服務(wù)可用性,通過Nginx配置stream模塊根據(jù)客戶端IP地址動(dòng)態(tài)轉(zhuǎn)發(fā)TCP請求至不同后端服務(wù)器節(jié)點(diǎn),適用于數(shù)據(jù)庫代理、TCP服務(wù)負(fù)載均衡及地域或來源IP分流的流量調(diào)度等場景,本文給大家介紹Nginx 實(shí)現(xiàn) TCP/DUP流量按 IP 動(dòng)態(tài)轉(zhuǎn)發(fā)的操作2024-10-10