Why was this file even created? You might have come to know that your frontend and backend server API are not on the same host (i.e. they are generally on localhost 3000 and 5000). And thats why we need to proxy the API requests from the frontend to the API server during development.
module.exports = {} In this case it's doing a trivial task of setting a few options automatically and is loaded by the @vue/cli-service process.
The devServer : { } configuration option helps us set up a new host for local development, so that the frontend can directly make us of the name-based virtual hosting functionality.
We set the `proxy: { }' : Our frontend app and the backend API server are not running on the same host, we need to proxy API requests to the API server during development.
'/api' will be the name that our frontend will use to redirect itself to backend (i.e. target: 'localhost/& in this case I suppose).
changeOrigin: true this option enables us to serve multi API urls based on their names on the same host. (i.e. localhost/api/post/1 and localhost/api/post/2.)
Finally to pass this localhost/api/post/1 as localhost/post/1 (i.e. to remove /api from our request) we make use of pathRewrite: { '^/api': ''} which will replace the /api with empty string.
Note that: The purpose of pathRewrite here is to remove the matched portion from the destination URL.
Hope this helps you, Raffaele Iavazzo