Support base option during dev

Is your feature request related to a problem? Please describe.

Running multiple independent SPAs in subdirectories within the same domain like microservices for front-end is well supported for production builds by setting base. Example

https://domain.com/profile -> 'base':'/profile'
https://domain.com/admin -> 'base':'/admin'

Ok, but this seems impossible to set up for local dev because /vite/client, WebSocket, etc. will still load from the root path / instead of from base path, like /profile/vite/client.

Of course same applies to modules urls /src/App.vue instead of /profile/src/App.vue, etc.

Describe the solution you’d like

Assuming nginx (or similar) set up “in front” of some vite dev projects, like so:

location /profile {
  proxy_pass http://0.0.0.0:8081; 
}

location /admin {
  proxy_pass http://0.0.0.0:8082;
}

And running two local dev projects by a simple $ vite configured like:

// 1st vite.config.js
module.exports = {
  port: 8081,
  base: '/profile'
}

// 2nd vite.config.js
module.exports = {
  port: 8082,
  base: '/admin'
}

Describe alternatives you’ve considered

So far this was feasible with a little hacky setup in vue-cli (also see https://github.com/vuejs/vue-cli/issues/4400):

// vue.config.js
module.exports = {
  publicPath: '/profile/',

  devServer: {
    public: '0.0.0.0',
    port: '8081',
    sockPath: '/profile/websocket',
    disableHostCheck: true
  },

  configureWebpack: {
    plugins: [
      {
        // needed workaround for sockPath issues
        apply: compiler => {
          compiler.hooks.entryOption.tap('entry', () => {
            const clients = compiler.options.entry.app
            for (const index in clients) {
              if (clients[index].match(/sockjs-node/)) {
                clients[index] = clients[index].replace(
                  '0.0.0.0/sockjs-node',
                  '0.0.0.0&sockPath=/profile/websocket'
                )
              }
            }
          })
        }
      }
    ]
  }
}

Additional context

I didn’t find a solution yet within Github issues. Sorry if I missed one. There are some related PRs though to configure socket path for example. Still, there seems to be no workaround for /vite/... and /src/... URLs.

[lovetingyuan]

Is full url base still not supported?

export default defineConfig({
  base: `http://localhost:4343/`,
  server: {
    port: 4343
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: `http://localhost:4343/`
        }
      }
    }),
  ]
})

But I still get this:

[bompus]

PR submitted