How to use SSL with Vue CLI for local development?

Simply enter this in your Chrome

chrome://flags/#allow-insecure-localhost

Set to Enabled, restart Chrome, and you're good to go.

My problem was that everybody talks about putting the cert properties in the "https" child configuration node, but this doesn't work, you hve to put it in the devServer config node:

module.exports = {
devServer: {
    port: '8081',
    https: {
       key: fs.readFileSync('./certs/server.key'),
          --> this is WRONG

This is the correct way:

module.exports = {
  devServer: {
    disableHostCheck: true,
    port:8080,
    host: 'xxxxxx',
    https: true,
    //key: fs.readFileSync('./certs/xxxxxx.pem'),
    //cert: fs.readFileSync('./certs/xxxxxx.pem'),
    pfx: fs.readFileSync('./certs/xxxxxx.pfx'),
    pfxPassphrase: "xxxxxx",
    public: 'https://xxxxxx:9000/',
    https: true,
    hotOnly: false,
   }
}

Use the network path rather than loopback or localhost. For example

https://192.168.2.210:8080/

works fine, while

https://localhost:8080/ and https://127.0.0.1:8080 balk at the certificate problem.

You are doing right, but you also have to add the self-signed cert inside certification authorities of your browser, as it is self-signed.

Instead of using a self-signed certificate, you can also create a root certificate, and then generate a localhost or other server identifier certificate. I recommend this solution because this way you can generate certificates for all non production environments and import only one custom certification authority.

There are many sites where you can find how to do it, one of them I think it's very clear is How to create an HTTPS certificate for localhost domains. Basically you have to follow these steps described in that link:

1. Generate certification authority key:

   openssl req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN=Example-Root-CA"

Here we have to change the parameters as we wish, mainly -sub parameter.

2. Generate certificate for certification authority

   openssl x509 -outform pem -in RootCA.pem -out RootCA.crt

3. Generate key for localhost

   openssl req -new -nodes -newkey rsa:2048 -keyout localhost.key -out localhost.csr -subj "/C=US/ST=YourState/L=YourCity/O=Example-Certificates/CN=localhost.local"

Where you have to change -subj as you need or leave it that way.

4. Generate localhost certificate by creating a certificate config file and request openssl to generate it.

This is the certificate config file:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = fake1.local
DNS.3 = fake2.local

And this is the command to generate the certificate:

openssl x509 -req -sha256 -days 1024 -in localhost.csr -CA RootCA.pem -CAkey RootCA.key -CAcreateserial -extfile domains.ext -out localhost.crt

Once you have the certificate, you have to import the certification authority on your preferred browser. You can, also, follow 3 and 4 steps for every server or virtual machine you need for development and use them without needing to import new certification authorities in your browser.

If you have legit certificates Chad Carter gives a good explanation here: https://stackoverflow.com/a/57226788/2363056

The steps are as follows:

1. create vue.config.js in your projects root (if not there already)
2. add the following code to it:

const fs = require('fs')

module.exports = {
    devServer: {
    port:8080,
    host: 'example.com',
    https: true,
    key: fs.readFileSync('/etc/ssl/keys/example.com.pem'),
    cert: fs.readFileSync('/etc/ssl/keys/example.com/cert.pem'),
    https: true,
    hotOnly: false,
    }
}

3. when serving your project, ensure https is enabled (ie. $ vue-cli-service serve --https true)

I use the mkcert to create trusted https cert on windows OS. mkcert.

Last thing you should do is openning your OS explorer, click the install.bat file

After going through the compiler errors, this is what worked for me:

vue.config.js

devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('/path/to/key/file'),
        cert: fs.readFileSync('/path/to/cert/file'),
        passphrase: 'pass_phrase_if_applicable'
      }
    }
  }

package.json

"scripts": {
  "serve": "vue-cli-service serve --https"
}