Vue.JSVue.JS

How to run Vue webpack under HTTPS

Nov 09, 2017 · Updated: Feb 10, 2021 · by Tim Kamanin

2021 update:

The instructions below were written back in 2017. In 2021, running Vue in dev mode with SSL on is much simpler.

To enable https support in Vue dev mode edit the vue.config.js file that you can find at the root of the project and add https: true line under devServer:

javascript
module.exports = {
  // ... other config ...
  devServer: {
    https: true,
  }
};

Save the file and run the npm run serve command; it should launch the server at https://localhost:8080.

End of 2021 update

Below is the old text 👇

### 1. You need self-signed certs at first

Generate them via this command openssl req -nodes -new -x509 -keyout server.key -out server.cert and put them into a certs dir in the root of your vue webpack project.

2. Open build/dev-server.js and add

javascript
const https = require('https')
const fs = require('fs')

to the top of the file.

3. Replace server with https server

In build/dev-server.js locate a string server = app.listen(port) and replace it with

javascript
server = https.createServer({
    key: fs.readFileSync('./certs/server.key'),
    cert: fs.readFileSync('./certs/server.cert')
}, app).listen(port);

Save your changes.

4. Run the dev server

Now type a npm run serve and your dev server should be avaialable as https://localhost:8080/

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Other Vue.JS tutorials:

Next / Previous post:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓