Vue.js: develop with https

  • Update your hosts file
  • Generate a Certificate Authority (CA)
  • Generate dev.local certificate and sign
  • Update vue.config.js
  • Test

Update hosts file

I don’t recommend using localhost for ssl / https. It’s a lot simpler to use a domain like dev.local, just add this to your /etc/hosts file:

% ping dev.local
PING dev.local (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.082 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.048 ms
^C

Create Certificates

Create a certs directory inside your project dir

mkdir certs
cd certs

The easy way: mkcert

Install mkcert, then run:

mkcert dev.local "*.local" localhost 127.0.0.1 ::1
mkcert -install

Update vue.config.js

const fs = require('fs')
module.exports = {
devServer: {
host: 'dev.local',
port: 8080,
https: {
key: fs.readFileSync('./certs/dev.local+4-key.pem'),
cert: fs.readFileSync('./certs/dev.local+4.pem'),
//ca: fs.readFileSync('./certs/my-ca.crt')
},
disableHostCheck: true,
proxy: {
'^/api': {
target: 'http://localhost:1337',
changeOrigin: true
},
}
}
}
npm run serve

The long way…

I left this section is for you to try — it works but for some reason the browser thinks the cert is not valid. Let me know in the comments what you think?

openssl genrsa -des3 -out my-ca.key 4096
openssl req -x509 -new -nodes -key my-ca.key -sha256 -days 2048 -out my-ca.crt
% openssl genrsa -out dev.local.key 4096% openssl req -new -key dev.local.key -out dev.local.csrEnter pass phrase for dev.local.key:You are about to be asked to enter information that will be incorporated into your certificate request.What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter ‘.’, the field will be left blank.
— — -
Country Name (2 letter code) [AU]:GB
State or Province Name (full name) [Some-State]:Buckinghamshire
Locality Name (eg, city) []:Beaconsfield
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:dev.local
Email Address []:
Please enter the following ‘extra’ attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
All fields are optional, except the Common Name : dev.local
openssl req -in dev.local.csr -noout -text
openssl x509 -req -in dev.local.csr -CA my-ca.crt -CAkey my-ca.key -CAcreateserial -out dev.local.crt -days 1000 -sha256

Import the CA into keystore

On mac, open KeyChain Access and drag the my-ca.crt in. Double-click the certificate and update the trust as follows:

Double-click the cert to edit
Save and reopen to check trust is updated

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store