Nginx部署Vue前端專案，部署多個Vue專案

邢帅杰發表於2024-06-21
NginxVue前端
參考：https://blog.csdn.net/qq_33454884/article/details/89212702
啟動閃退：https://blog.csdn.net/weixin_66383346/article/details/132622156
1.下載安裝nginx 下載地址：https://nginx.org/en/download.html windows版 ：nginx/Windows-1.27.0
解壓後必須放在沒有中文，沒有空格的目錄中
2.啟動nginx，直接雙擊nginx.exe 或者 cmd進入安裝目錄，執行命令：start nginx ，然後訪問 http://localhost/ ，會出現 Welcome to nginx! 就成功了。
這個版本預設埠號80，很可能已經被佔用，被佔用就沒法正常啟動，需要修改配置檔案 /conf/nginx.conf 把埠改成空閒的，然後加上埠再訪問 http://localhost:88/
注意：安裝目錄資料夾必須具有寫入許可權，不然也沒法啟動，nginx要寫日誌的。
    server {
        listen       88;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html index.htm;
        }
        #後面還有其他配置，我只擷取了這些...
    }

3.nginx常用命令

啟動服務：start nginx
退出服務：nginx -s quit
強制關閉服務：nginx -s stop
過載服務：nginx -s reload　　（過載服務配置檔案，類似於重啟，服務不會中止）
驗證配置檔案：nginx -t
使用配置檔案：nginx -c "配置檔案路徑"
使用幫助：nginx -h

4.部署前端專案，比如我的前端專案釋出後的目錄是 D:\VueSite
修改nginx.conf的location 的 root 配置，指定前端專案的目錄；index 是用來指定首頁的，vue編譯完了首頁就是index.html 這裡不用改。
然後執行命令 nginx -s reload 重啟nginx ，訪問 http://localhost:88/ 就可以正常訪問vue專案了

    server {
        listen       88;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   D:\VueSite;
            index  index.html index.htm;
        }
        #後面還有其他配置，我只擷取了這些...
    }

5.nginx同時部署多個前端專案，只需要配置多個server節點，埠改成不一樣的，這樣就可以了。

    server {
        listen       88;
        server_name  localhost;
        location / {
            root   D:\VueSite;
            index  index.html index.htm;
        }
    }

    server {
        listen       89;
        server_name  localhost;
        location / {
            root   D:\VueSite2;
            index  index.html index.htm;
        }
    }

    server {
        listen       90;
        server_name  localhost;
        location / {
            root   D:\VueSite3;
            index  index.html index.htm;
        }
    }

相關文章