Vue-cli: Allow passing SSL Cert/Key when using HTTPS

[willsoto]

What problem does this feature solve?

Allows users to utilize custom SSL certs for HTTPS.

In some cases, it might be necessary to use an SSL certificate for local development.

Moreover, these options are accepted for both webpack-dev-server and the newer webpack-serve:

• https://webpack.js.org/configuration/dev-server/#devserver-https
• https://github.com/webpack-contrib/webpack-serve#cli

I think it makes sense to expose these options to users.

Other CLIs have accepted similar PRs:

• https://github.com/pallets/flask/pull/2606

What does the proposed API look like?

The addition of --key, --cert and potentially --cacert to vue-cli-service serve.

These values would be optional when --https is used, but in order to use --key and --cert, --https would be required. Or we could infer --https from the presence of a cert/key.

[LinusBorg]

You should be able to specify these options in vue.config.js, in the devServer property:

https://github.com/vuejs/vue-cli/blob/dev/docs/config.md

So just that I understand:

• Did you try this and it didn't work?
• or did you not know about it?
• or did it work, but you just want these to be available as CLI arguments as well?

[willsoto]

You are right! I actually didn't know I could override it there, but it makes sense.

I could argue these should be CLI arguments as well. I think those were my expectations having worked with other similar CLIs. Seeing https as a possible argument but not seeing the others made me think they weren't exposed.

This is fine though. You can close this if you feel that overriding via config is sufficient.

[willsoto]

It works via config. I don't think this is necessary anymore. Thanks for pointing it out!

[LewisPringle]

I'm trying to do exactly this, and added the stuff called for to vue.config.js:

const fs = require('fs');

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

and I still get an invalid SSL cert (unrecognzied CA) when I run
vue-cli-service serve --mode development --https --port 8001 from npm

Using @vue/cli-service 3.4.1

[LewisPringle]

OK - never mind. I figured out what was wrong. Passing --https to vue-cli-service serve appears to OVERRWRITE the https element of devServer (probably with true). That's a bit of guesswork/inference, but what is clear, is that eliminating the --https parameter to vue-cli-service serve fixed my problem, and caused vue-cli-serve to properly use the provided certs.

[arjusmoon]

I am not able to import the fs module. It is throwing an error
ERROR Error loading vue.config.js:
ERROR SyntaxError: Cannot use import statement outside a module

My vue.config.js looks like this. Please help

const fs = require('fs');

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

[mruffieux]

Hm sorry to bump this but webpack document suggests :

```javascript
module.exports = {
//...
devServer: {
https: true,
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
};