How to use SSL with Vue CLI for local development? How to use SSL with Vue CLI for local development? vue.js vue.js

How to use SSL with Vue CLI for local development?


Simply enter this in your Chrome

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

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


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


Use the network path rather than loopback or localhost. For example

https://192.168.2.210:8080/

works fine, while

https://localhost:8080/ and https://127.0.0.1:8080 balk at the certificate problem.