I'm using Vue-cli to create vue project with webpack template. how to run it with https in development using: npm run dev
?
-
There is a more up to date answer below. Maybe it will be nice to mark it as the best answer to make it easier to find. – Maksim Danilau May 22 '20 at 7:30
Webpack template uses express
as the server for development. So just replace
var server = app.listen(port)
with following code in build/dev-server.js
var https = require('https');
var fs = require('fs');
var options = {
key: fs.readFileSync('/* replace me with key file's location */'),
cert: fs.readFileSync('/* replace me with cert file's location */'))
};
var server = https.createServer(options, app).listen(port);
Please note that in webpack template, http://localhost:8080
will be automatically opened in your browser by using opn module. So you'd better replace var uri = 'http://localhost:' + port
with var uri = 'https://localhost:' + port
for convenience.
-
1Thank you @choasia, it works perfect! I created key and cert files using: openssl genrsa -out localhost.key 2048 openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost all good, however browsers warned that the site is not trusted. I imported the certificate to "Trusted Root Certificate Authority" (in windows) then worked in IE but not in chrome nor Firefox, any thoughts ? Thanks – Raed Alahmad Aug 23 '17 at 13:29
-
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
-
8
-
2So far I got. But chrome > 58 throws at net::ERR_CERT_COMMON_NAME_INVALID – digitaldonkey Oct 15 '18 at 17:03
-
6Works great, but you only need the
https: true
part. The other variables are optional and not needed to use https. – Arno van Oordt Oct 25 '18 at 6:44 -
10I still get ERR_CERT_AUTHORITY_INVALID in chrome. Is there a way to fix this in chrome? – Konstantin Schubert Jan 5 '19 at 23:15
-
Has anyone managed to get around the `ERR_CERT_AUTHORITY_INVALID issue in Chrome? – AnonymousAngelo Jul 15 '19 at 13:16
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!
-
10Thanks a lot! It was easier than I thought. In my case I had to add one more option to
devServer
config to stopGET https://localhost/sockjs-node/info?t=1565111974584 net::ERR_CONNECTION_REFUSED
errors in console:{public: 'https://localhost:8080/'}
– mcmimik Aug 6 '19 at 17:22 -
When using Vuetify, I had to make a slight mod to this, otherwise I got an error: "[ERR_INVALID_ARG_TYPE]: The "options.cert" property must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object". I made https: true and added the key and cert properties at the same level, properties of devServer. Then everything seemed to work as expected. – Joshua Richardson Apr 18 '20 at 19:17
-
Thank you Chad I keep coming back to this answer and its so useful. What I don't understand is what is the point of vue-cli if the app it generates can't even be run on chrome out of the box? Surely they can provide something like this when you run
vue create
? – Bassie May 30 '20 at 16:01 -
1@Bassie I'm glad you find this helpful. My guess is if we didn't need a self-signed certificate that the vue cli could do it. And I'm sure they could hook into to a tool like mkcert above. It may be a good issue to bring up in their github repo - suggest they have an option to enable https which guides the user through generating a cert and then they set these values automatically. – Chad Carter Jun 9 '20 at 11:53
-
1
In /build/webpack.dev.conf.js
,to devWepackConfig
in devServer
, add
https: true
-
4Why is it downvoted? In my case, adding this option under
devServer
works perfectly. – user19906 May 25 '18 at 3:55 -
You will still get the warning when running in Chrome or Edge, as the certificate is not a trusted certificate. But you can switch off the prompt when running the site by setting the following flag:
chrome://flags/#allow-insecure-localhost
This also works also in the latest version Edge.
Simplest way is to go into package.json and change "dev" to
"dev": "webpack-dev-server --inline --progress --https --config build/webpack.dev.conf.js",
it will still give the message running on http://localhost in the console but you can access the site on https://localhost
-
6
-
If you are using vue ui to serve your application, a simple solution is to replace
"serve": "vue-cli-service serve",
with
"serve": "vue-cli-service serve --https true",
in the package.json
file of your project.
Now use vue ui to serve your application. You can make even more changes. See https://cli.vuejs.org/guide/cli-service.html#using-the-binary