How to run Vue.js dev serve with https?

I'm using Vue-cli to create vue project with webpack template. how to run it with https in development using: npm run dev?

Solution 1:

In the latest vuejs (as of May 7, 2018), you need to add a "vue.config.js" in the project root directory:

vue.config.js:

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8085, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

In this file, set the value: https: true

Solution 2:

Jianwu Chen's answer helped me out, but to help those in the comments that wanted an expanded answer, I'm creating this answer. I hope it helps.

The questions are basically, how do we tell the browsers that "I know it is an invalid certificate, but I'm ok with it, because I'm developing a site locally."

So to try and make a full answer in one place, here it goes...

First, inside of vue.config.js make sure you include

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/example.com+5-key.pem'),
          cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        public: 'https://localhost:8080/'
    }
}

You can obviously have other stuff in there, but the main thing is that you have https with children of key and cert. Now, you need to point to where your certificate file is.

Instead of simply setting https to true, we are passing an object with a key and cert to https.

We are telling vue cli we want to use this particular certificate and key.

How do we get that certificate and key? Well, we have to create it.

Fortunately, there is a tool that helps do this easily: https://mkcert.dev (currently points to https://github.com/FiloSottile/mkcert)

You can install it following the instructions in GitHub. I personally just grabbed the latest release from: https://github.com/FiloSottile/mkcert/releases

Then follow the instructions:

mkcert -install

followed by:

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

That will create the files in the directory.

Copy the files to your source folder referenced in the vue.config.js above (i.e. ./cert) and you should be good to go. Make sure you update the file names to match.

Update: Also note the config has:

public: 'https://localhost:8080/'

Thanks to @mcmimik for pointing this out in the comments. Without that line you'll get the console error he mentioned about ::ERR_CONNECTION_REFUSED. Adding this line to devServer as a sibling to https will kick that error to the curb. If you like this answer, make sure to like his comment too!

Solution 3:

In /build/webpack.dev.conf.js,to devWepackConfig in devServer, add

https: true