How to use SSL with Vue CLI for local development?

Question

I understand to use https with Vue CLI I can set "https: true" under devServer in a vue.config.js file, but I also need a self signed certificate.

I've tried generating a self signed one using OpenSSL and using the following in my vue.config.js file to target:

const fs = require('fs');

module.exports = {
    devServer: {
        port: '8081',
        https: {
            key: fs.readFileSync('./certs/server.key'),
            cert: fs.readFileSync('./certs/server.cert'),
        },
    },
};

Chrome confirms it's using my certificate but still shows https as "Not secure"

How can I make chrome assess my self signed certificate as secure when providing it via Vue CLI?

Solution 1

Simply enter this in your Chrome

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

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

Solution 2

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,
   }
}

Solution 3

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.

Solution 4

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)

View more solutions

Comments

[digout]

Not if you are using a virtual host.

[Muhammed Kadir]

Yeah, that is interesting. Official documentation for Webpack.JS states otherwise; but this solution works. Thanks.

[Alexandre]

This simply works, thanks I also needed to change my Java API address (.env.dev) to 127.0.0.1:8081 to stop the HTTP 307 redirection to HTTPS