Self Signed x509 Cert and Vue CLI (Webpack)

Self Signed x509 Cert and Vue CLI (Webpack)

I just spent longer than I would have liked resolving this issue. Hopefully this post helps some others.

While using a self signed certificate generated by openssl (from Ubuntu running under WSL2 on Windows 10... in case you care) for local development of the Brakecode.com dashboard using Vue CLI, I continued getting these errors in Devtools.

Browser DevTools

Cutting straight to the point, the resolution was to update my certificate to include the IP address 10.0.0.40 that Webpack via Vue was listening on as shown here:

Vue CLI

I added this line (pretty sure IP.1 was not neccessary but I added it anyway) and regenerated my .crt file...

IP.2 = 10.0.0.40

Certificate Configuration

Problem solved! Cheers.

UPDATE (it's 9:49pm now)...

For some reason during my workflow Webpack decided to start using a different IP address (of which there are many on my dev "rig" <- credit to James Harris III for that one).

Different IP Address

So make sure you set the host explicitly in your Vue config! Otherwise you'll have to add every IP configured on your dev rig to the x509 cert, and that seems like the wrong path to go down...