How to use SSL with Vue CLI for local development?
Apr 25, 2021
Learn how to use SSL with Vue CLI for local development.
Usually in local development environment the vue app is served via
httpprotocol. But in production environment it is served via
https. Running the local server in
httpsmight be needed if you consume API that is forced to be consumed only by the app served via HTTPS.
In this guide, we will be setting up HTTPS in our development environment for our vue app with our own SSL certificate.
The most common way to scaffold a vue project is via its vue-cli tooling and running following commands
The app runs locally at
Now we want the app to be served via
https. We can do this easily by setting up our own SSL certificate in development for
To create a valid SSL certificate easily we make use of mkcert tool. Run the following commands to obtain a certificate.
Now we have successfully created Certificate Authority (CA) on our machine which enables us to generate certificates for all of our future projects.
From the root of our hello-world project, run the following commands,
Now we have a
.certsfolder with key and cert files inside it.
Please, make sure to add this folder to
.gitignoreso that we don't accidently commit these files to version control.
Vue CLI allows us to configure it via config file as follows
Here we are pointing to CLI where our certificate file is by simply passing an object with a key and cert to devServer's https config.
We are almost at the end of the process. Let's restart the server again. Voila, now our app is served via