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?

Answer 1

Simply enter this in your Chrome

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

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

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