Error while making Vue application run with HTTPS

Question

I'm working on a Vue 2 application and am using Vue-cli version 5.0.6. I have to convert it to HTTPS. Going through the internet, I found this solution.

After implementing the solution, my vue.config.js file looks like this:

const fs = require('fs');
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        allowedHosts: 'auto',
        https: {
            key: fs.readFileSync('./certs/example.com+5-key.pem'),
            cert: fs.readFileSync('./certs/example.com+5.pem'),
        }
    }
});

But, the end of the solution says to add public: 'https://localhost:8080/' also. I've tried adding this, but on running the application, it gives the following error:

When I remove this public: 'https://localhost:8080/' line, then the console does not give an error. But then, in the browser's console, a WebSocket connection failed error shows again and again. Also, if I use my local ip instead of localhost in the browser, then the following is shown on the browser:

I want to know the reason for these errors. Plus, if there's a better solution.

Thanks