子目录中的 Vue 主机开发服务器 Web 套接字答案

【问题标题】：Vue host development server web socket in subdirectory子目录中的 Vue 主机开发服务器 Web 套接字
【发布时间】：2019-06-18 17:38:23
【问题描述】：

我正在尝试使用 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 更改为/ 时，我无法让客户端在正确的子目录中查找资产。

有正确的方法吗？

【问题讨论】：

如果您需要在向上游传递之前从 URI 中删除 /test，请使用 proxy_pass http://localhost:8080/;（在 location 和 proxy_pass 语句上都使用尾随 /）。跨度>
@RichardSmith 我试过了，但是当我将publicPath 保留为/test/ 时，它没有渲染index.html，当我将publicPath 变成/ 时，我不能让客户端将test/ 添加到url。
您找到解决方案了吗？
@Norbert 我最后只是为/test/sockjs-node/ 的请求放置了一个代理通行证，它解决了到 localhost 的正确方式。不是最强大的解决方案，但目前可以使用。

标签： nginx vue.js webpack webpack-dev-server

【解决方案1】：

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

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

在这种情况下：

sockPath: '/test/sockjs-node',

【讨论】：