快捷導(dǎo)航

Nginx和vue編譯后的存放位置的配置實(shí)踐

更新時(shí)間：2025年09月05日 11:14:42 作者：工欲善其事&必先利其器

這篇文章主要介紹了Nginx和vue編譯后的存放位置的配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Nginx和vue編譯后的存放位置

/home/appadm/nginx/conf/目錄下的nginx.conf文件中的內(nèi)容如下：

worker_processes  auto;
events {
    worker_connections  65535;
}

http {
    include       mime.types;
    include conf.d/*.conf;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
}

主要是這句

include conf.d/*.conf; 依賴于conf.d目錄下的以.conf為后綴的文件

/home/appadm/nginx/conf/conf.d目錄下的lc_rpt.conf文件內(nèi)容如下：

server {
    listen 8001 ssl;
    server_name 11.x.x.5 192.168.x.2;
    
    ssl_certificate /app/sslkey/cert.crt;
    ssl_certificate_key /app/sslkey/key.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    error_page 497 301 https://$http_host$request_uri;
    
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    #重點(diǎn) end
    #dex  index.html index.htm;
    
    location / {
  	    root   /app/lc_rpt_web/;
        index  index.html index.htm web/index.html;
  	    try_files $uri $uri/ /web/index.html;
    }
    #反向代理的作用
    location /oauthApi/ {
        proxy_set_header Host $host:$server_port;
        proxy_pass http://192.168.x.3:8003/;
    }
    
    #后端基礎(chǔ)服務(wù)，反向代理的作用
    location /indicator-lpt/ {
  	    proxy_pass http://192.168.x.3:8002/indicator-lpt/;
    }
}

root /app/lc_rpt_web/; #前端的內(nèi)容存放的路徑，和下面的解壓dist目錄時(shí)存儲(chǔ)的路徑保持一致。

/app/lc_rpt_web/目錄下的manager.sh腳步內(nèi)容如下：

unzip /app/lc_rpt_web/dist.zip -d /app/lc_rpt_web/ – 這句是將上傳到服務(wù)器上的vue編譯壓縮后的包，解壓到/app/lc_rpt_web/目錄下，在這個(gè)目錄下生成dist目錄，dist目錄下就是最新的前端內(nèi)容
rm -rf /app/lc_rpt_web/web_bak – 刪除之前的備份
mv /app/lc_rpt_web/web /app/lc_rpt_web/web_bak – 將當(dāng)前運(yùn)行的前端內(nèi)容轉(zhuǎn)為備份
mv /app/lc_rpt_web/dist /app/lc_rpt_web/web – 將解壓后的最新的前端內(nèi)容轉(zhuǎn)為運(yùn)行的前端內(nèi)容，僅有內(nèi)容變化，無配置變化，無需重啟nginx
rm -f /app/lc_rpt_web/dist.zip – 刪除上傳到服務(wù)器上的dist.zip

背景：

前端通過 npm run build:dev 后，執(zhí)行相關(guān)的腳步后生成的編譯后的結(jié)果是dist.zip