Skip to content

Support base option during dev #833

@mashpie

Description

@mashpie

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 vuejs/vue-cli#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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions