Web 项目热加载

[ghost]

How to configure 'vue. config. js' without setting it

Instead, use environment variables or Code Server command parameters to set the URL of the Web Socket?

Similar to Github Codespace, there is no need to modify the project itself

Or where can I find detailed configuration documents for Code Server? 🥺🥺🥺

thank you 🙏

[code-asher]

This is something that works in Codespaces but not code-server? Could you provide an example or steps to reproduce?

[code-asher]

Ahhhhh wait yeah if I use a non-localhost host I get the same error. Let me see if I can figure out why.

[code-asher]

Actually Codespaces is broken too, at least for me. It does not show that white screen with "Invalid Host header" but the websocket does disconnect with {"type":"error","data":"Invalid Host/Origin header"}.

[code-asher]

I echoed the headers Codespaces is sending to the app:

--> GET / HTTP/1.1
--> Host: localhost

It looks like Codespaces is dropping the host which is why the root page loads (this could technically be considered a bug in webpack-dev-server since they are not checking X-Forwarded-Host or Forwarded). But then the web socket has an origin check which fails. If Codespaces did not drop the host they would have the same problem we have.

https://github.com/webpack/webpack-dev-server/blob/abbcb448b72b2d11e07b656c8018c146d1688a91/lib/Server.js#L1967-L1977

https://github.com/webpack/webpack-dev-server/blob/abbcb448b72b2d11e07b656c8018c146d1688a91/lib/Server.js#L2553-L2558

So I think with Vue/webpack-dev-server it is expected you are supposed to configure the allowed hosts when behind a reverse proxy.

[code-asher]

While that explains why we need allowedHosts it does not explain why we need webSocketURL. I poked at it a little but I still have no idea why it works in Codespaces without extra configuration. For now I think we just have to set it.

That leaves us with this config:

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: "all",
    client: {
      webSocketURL: "auto://0.0.0.0:0/ws",
    },
  },
})