vuejs routing with express server - vue.js

Question

I've a node.js (express) application listening at localhost:4000/api
I'm working on a vuejs based client with router as follows,
const routes = [
{
path: '/customers',
name: 'customers',
component: Customers,
},
{
path: '/customers/:customer_id',
name: 'customer_details',
component: CustomerDetails,
},
]
I'm managing server path via vue.config.js file as,
const path = require('path');
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:4000'
}
}
}
}
I'm also using state mgmt via store object/functionality as follows,
const BASE_URL = 'api/'
fetchCustomers(context) {
const server_url = BASE_URL + '/customers'
axios.get(server_url)
...
}
This works fine, but
fetchCustomer(context, id) {
const server_url = BASE_URL + '/customers/' + id
axios.get(server_url)
...
}
This one fails with 404 error. When I checked on the server, I see that client is making call to,
/customers/api//customers/5c891995e5212d439459ff28
instead of
/api//customers/5c891995e5212d439459ff28
And at the client side I've a router-link as follows,
<router-link :to="{'name':'customer_details',
params: {'customer_id': cid }}></router-link>
When I click on this link, I'm seeing following in the console,
GET http://localhost:8080/customers/api//customers/5c891995e5212d439459ff28 404 (Not Found)
If I remove vue.config.js and put BASE_URL with complete path as 'http://localhost:4000/api', then I don't see this error. Must be very small mistake but I'm not seeing it. Any help is appreciated.