vue vue-router(history模式) node(express)項目部署到雲主機上的nginx配置思考

我我的想了2種部署方案

一、將vue項目打包後放入node服務端的靜態資源中訪問

總體結構基本是這樣的

這樣在雲主機上的nginx配置就很簡單

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服務進程
        proxy_pass http://localhost:8088;
    }
}

但這樣有一個問題，若是你的vue-router是history模式的話，你刷新或者手動輸入url訪問將會是404，你也很難經過修改nginx配置來規避這個錯誤（由於並不須要在nginx配置裏面指定根目錄）

解決辦法：
vue官方
基於 Node.js 的 Express

對於 Node.js/Express，請考慮使用 connect-history-api-fallback 中間件。

這個方法我沒有嘗試過，不過應該是可行的！

這樣的優勢是很簡便，適合小型的網站項目

2 將打包的vue項目和node服務端分別部署

server {
    listen 80;
    server_name xxx.com;
    # 客戶端
    location / {
            # 根目錄
            root html/client;
            # 主頁
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制後臺
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服務端
    # api 
    location /api {
            proxy_pass   http://localhost:8088;
            # 跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

}

這樣部署雖然稍微麻煩一點，但能夠適應不少場景，並且開發分工更方便，結構也一目瞭然