子目錄中的Vue主機開發服務器web socket

Question

我正在嘗試使用 nginx 在我的域的子目錄中托管一個 Vue 開發服務器（包括 Web 套接字），但在我當前的設置中，看起來 vue 服務器正在響應請求而不是 webpack 開發服務器。

明確地說，我希望我的應用程序托管在https://xxx.yyy/zzz/ ，我希望資產等托管在https://xxx.yyy/zzz/path/to/asset ，我希望webpack 開發服務器托管在https://xxx.yyy/zzz/sockjs-node/info?t=... 。 我很確定這應該是可能的，而無需對 nginx 設置進行特殊設置，因為它可以在沒有子目錄的情況下工作。

到目前為止，這是我的設置：

nginx

server {
    # server name, ssl, etc

    location /test/ {
        proxy_pass http://localhost:8080;
    }
}

創建項目

$ vue create -d hello-world

vue.config.js

module.exports = {
    publicPath: '/test/',
    devServer: {
        public: "0.0.0.0/test",
        disableHostCheck: true,
    }
}

然后運行

$ npm run serve

客戶端向所有正確的地方發出請求，但是

$ curl https://xxx.yyy/test/sockjs-node/info

返回index.html ，而

$ curl localhost:8080/sockjs-node/info

返回預期的 websocket 信息。 我也嘗試將 nginx 設置更改為proxy_pass http://localhost:8080/; ，但是當我轉到https://xxx.yyy/test/時，這會導致index.html無法呈現，因為它需要一條路徑並且沒有被轉發。 當我還將publicPath更改為/ ，我無法讓客戶端在正確的子目錄中查找資產。

有沒有正確的方法來做到這一點？

Answer 1

可以使用以下方法設置套接字路徑：

module.exports = {
    //...
        devServer: {
        sockPath: 'path/to/socket',
    }
};

在這種情況下：

sockPath: '/test/sockjs-node',