子目录中的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',