How to run vue.js dev serve with https?

@brandy 

To run a Vue.js development server with HTTPS, you can follow these steps:

1. Generate SSL certificates: You need to generate SSL certificates to enable HTTPS. You can use tools like OpenSSL to generate self-signed certificates for development purposes. Run the following commands in your terminal to generate SSL certificates:

1
2
3

openssl genrsa -out key.pem 2048
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem

1. Add the SSL certificates to your Vue.js project: Create a new folder named ssl in your Vue.js project root directory and copy the generated key.pem and cert.pem files into this folder.
2. Update your Vue.js configuration: Navigate to your vue.config.js file in the root of your Vue.js project and add the following configuration to enable HTTPS:

1
2
3
4
5
6
7
8

module.exports = {
  devServer: {
    https: true,
    key: fs.readFileSync('./ssl/key.pem'),
    cert: fs.readFileSync('./ssl/cert.pem'),
    ca: fs.readFileSync('./ssl/cert.pem')
  }
}

Make sure to require the fs module at the top of the file:

1

const fs = require('fs')

1. Start the Vue.js development server: Run the following command to start the Vue.js development server with HTTPS:

1

vue-cli-service serve

Your Vue.js development server should now be running with HTTPS enabled. You can access your application at https://localhost:8080.