0

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:

Console Error Screenshot

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:

Browser Error Screenshot

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

Thanks

kissu
  • 40,416
  • 14
  • 65
  • 133
Zoha Malik
  • 469
  • 1
  • 7
  • 19
  • 1
    As you can see, you need a secure HTTPS connection to even start working with Websockets. Your certificates are not valid (did you generated them with mkcert or alike?) hence why the error in the last screen. The first screenshot says that you don't have the key at the right place (maybe one level too high/low or should be nested somewhere else). – kissu Sep 22 '22 at 06:57
  • Yes I did generate the certificates with mkcert. Thanks for letting me know this. And about the key, I've tried using it at different places but the same error persists. – Zoha Malik Sep 22 '22 at 07:22
  • Try without the key, I'm not sure that you need that one. If you still have the error, maybe it's an issue regarding the certificates. Double check the path to them. – kissu Sep 22 '22 at 07:31
  • Without the key its giving an error about key mismatch so the key is required. I do think the issue is with the certificates... – Zoha Malik Sep 22 '22 at 08:00
  • Where do you see that it's required? You can always give a try to that one but it's not that IMO: https://cli.vuejs.org/config/#publicpath and I don't see what else it could be tbh. – kissu Sep 22 '22 at 08:03
  • I was just saying it's required because there's an error when I comment it. But, yes maybe the certificate's paths are not right or there could be an issue with the certificates. I'll check. – Zoha Malik Sep 22 '22 at 10:12
  • What? There should be a default anyway. Not sure of your source, the exact place you put it in but you should not be dependent on this kind of key. – kissu Sep 22 '22 at 10:20
  • Yes, the default is when I use either https: true or https: false and remove both the key and cert. If I keep the cert and remove the key then the error comes. – Zoha Malik Sep 22 '22 at 10:42

0 Answers0