Vue router - How to open in new tab in production?

Question

I am using Vue, Vuetify and my database is in postgreSQL with an API-backend from postgREST (https://postgrest.org/en/stable/). When using the localhost and hash mode everything is fine locally. I can open the component product in a new tab when using this syntax:

const route = this.$router.resolve({ path: `/product/${value.id}` }) (1)
window.open(route.href, '_blank')                                    (2)

However, in the production environment with postgREST-server when opening in a new tab, I get the wrong url :

http:server_name/api/#/product/1                                     (3)

When I remove /api from the above url (3) and rewrite it like this :

http:server_name/#/product                                           (4)

I get the correct page.
Is it a possible nginx rule that can be written to make sure that http:server_name/api/#/product/1 is automatically rewritten to the correct url http:server_name/#/product? or How can I change vue-router or vue config file in order to get same behavior in production as in locahost ?

Answer 1

A possible client-side workaround is to strip the /api prefix in production mode:

const url = process.env.NODE_ENV === 'production'
            ? route.href.replace('/api', '')
            : route.href
window.open(url, '_blank')