vue vue-router(history模式) node(express)項(xiàng)目部署到云主機(jī)上的n

Honwhy 發(fā)布于2019-07-25 14:24 / 3604人閱讀

摘要：這個(gè)方法我沒有嘗試過，不過應(yīng)該是可行的這樣的優(yōu)點(diǎn)是很簡(jiǎn)便，適合小型的網(wǎng)站項(xiàng)目將打包的項(xiàng)目和服務(wù)端分別部署客戶端根目錄主頁(yè)避免模式刷新管理控制后臺(tái)服務(wù)端跨域這樣部署雖然稍微麻煩一點(diǎn)，但可以適應(yīng)很多場(chǎng)景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然

我個(gè)人想了2種部署方案

1、將vue項(xiàng)目打包后放入node服務(wù)端的靜態(tài)資源中訪問

整體結(jié)構(gòu)基本是這樣的

這樣在云主機(jī)上的nginx配置就很簡(jiǎn)單

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服務(wù)進(jìn)程
        proxy_pass http://localhost:8088;
    }
}

但這樣有一個(gè)問題，如果你的vue-router是history模式的話，你刷新或者手動(dòng)輸入url訪問將會(huì)是404，你也很難通過修改nginx配置來(lái)規(guī)避這個(gè)錯(cuò)誤（因?yàn)椴⒉恍枰趎ginx配置里面指定根目錄）

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

對(duì)于 Node.js/Express，請(qǐng)考慮使用 connect-history-api-fallback 中間件。

這個(gè)方法我沒有嘗試過，不過應(yīng)該是可行的！

這樣的優(yōu)點(diǎn)是很簡(jiǎn)便，適合小型的網(wǎng)站項(xiàng)目

2 將打包的vue項(xiàng)目和node服務(wù)端分別部署

server {
    listen 80;
    server_name xxx.com;
    # 客戶端
    location / {
            # 根目錄
            root html/client;
            # 主頁(yè)
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制后臺(tái)
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服務(wù)端
    # 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";
    }

}

這樣部署雖然稍微麻煩一點(diǎn)，但可以適應(yīng)很多場(chǎng)景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然