柚子快報(bào)邀請(qǐng)碼778899分享：nginx 部署前端vue項(xiàng)目

http://yzkb.51969.com/

文章目錄

一、什么是nginx？二、nginx 部署前端vue項(xiàng)目步驟2.1 安裝nginx2.1.1 windows環(huán)境安裝2.1.2 linux環(huán)境安裝

2.2 打包vue項(xiàng)目

2.3 配置nginx

一、什么是nginx？

Nginx是一款輕量級(jí)的HTTP服務(wù)器，采用事件驅(qū)動(dòng)的異步非阻塞處理方式框架，這讓其具有極好的IO性能，時(shí)常用于服務(wù)端的反向代理和負(fù)載均衡。 優(yōu)點(diǎn)：

支持海量高并發(fā)：采用IO多路復(fù)用epoll。官方測(cè)試Nginx能夠支持5萬(wàn)并發(fā)鏈接，實(shí)際生產(chǎn)環(huán)境中可以支撐2-4萬(wàn)并發(fā)連接數(shù)。內(nèi)存消耗少可商業(yè)化配置文件簡(jiǎn)單 除了這些優(yōu)點(diǎn)還有很多，比如反向代理功能，灰度發(fā)布，負(fù)載均衡功能等

二、nginx 部署前端vue項(xiàng)目步驟

2.1 安裝nginx

2.1.1 windows環(huán)境安裝

到nginx官方下載系統(tǒng)相關(guān)的nginx版本安裝 啟動(dòng)命令：

cd F:\nginx-1.19.4

start nginx

2.1.2 linux環(huán)境安裝

通常情況下很少使用windows來(lái)作為nginx的服務(wù)器，一般使用linux。對(duì)于linux安裝nginx有兩種方式，一種是使用官方已經(jīng)編譯好的包來(lái)安裝，一種是使用源碼構(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)目并沒(méi)有太大差異，把構(gòu)建好的vue項(xiàng)目dist上傳到linux服務(wù)上，通用修改nginx服務(wù)器中的root來(lái)指向dist就ok了，然后使用

# centos 7

systemctl restart nginx.service

# centos 6

service nginx restart

# 或者是平滑重啟

service nginx reload

2.2 打包vue項(xiàng)目

執(zhí)行命令

npm run build

2.3 配置nginx

修改nginx配置文件，配置文件為conf下的nginx.conf,修改nginx.conf中的server配置片段

server {

listen 80;#默認(rèn)端口是80，如果端口沒(méi)被占用可以不用修改

server_name localhost;

root E:/vue_project/my_project/dist;#vue項(xiàng)目的打包后的dist

location / {

try_files $uri $uri/ @router;#需要指向下面的@router否則會(huì)出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404

index index.html index.htm;

}

#對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無(wú)法找到具體的文件

#因此需要rewrite到index.html中，然后交給路由在處理請(qǐng)求資源

location @router {

rewrite ^.*$ /index.html last;

}

#.......其他部分省略

}

完成nginx配置后重新加載配置文件

nginx -s reload

nginx -s reload 瀏覽器中訪問(wèn)：http://localhost 測(cè)試是否部署成功

柚子快報(bào)邀請(qǐng)碼778899分享：nginx 部署前端vue項(xiàng)目

http://yzkb.51969.com/

好文推薦