problems with dev server (proxy setup without destroying live reload & other strange behaviour)

[drahkrub]

Hi, I would like to switch from vue-cli to vite.

Everything works perfectly fine in production mode, but I have problems with vite (which I do not have with vue-cli) in development mode which I am unable to fix.

I've already described my problems in discussion #13299 but unfortunately got no answers at all.

Possibly it was because I provided a demo project which uses Spring-Boot as backend.

For this reason I've setup a pure Javascript project with Express.js as backend server which is even simpler, see https://github.com/drahkrub/demo-vue-cli-vs-vite

The main problem (in development mode) is to setup the dev server such that

• URLs are proxied "in a generic way" (multiple REST-URLs should be handled) to the backend server
• without destroying live reload

I've tried several settings but none of them worked. As I said I experience this problem with vite only, not with vue-cli.

Please visit https://github.com/drahkrub/demo-vue-cli-vs-vite where I have described the problems in more detail.

Any help is appreciated!

[marcusvramos]

Hi! The proxy configuration in Vite is slightly different from vue-cli. Here's how to set it up properly:

In your vite.config.js:

export default {
  server: {
    proxy: {
      // Proxy all /api requests
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
      // You can add multiple proxy rules
      '/auth': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
      // Or use a regex to catch multiple patterns
      '^/(api|auth|data)': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
}

Key differences from vue-cli:

• changeOrigin: true is often needed for CORS
• HMR (live reload) should work automatically with this setup
• Make sure your backend is running on the target port