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/;，但这会导致index.html在我转到https://xxx.yyy/test/时无法呈现，因为它期望路径并且没有被转发。当我还将publicPath更改为/时，也无法使客户端在资产的正确子目录中查找。

有正确的方法吗？

Answer 1

可以使用以下方法设置套接字路径：

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

在这种情况下：

sockPath: '/test/sockjs-node',

子目录

1 个答案: