this is not something that can be solved at the front end. We need to find the comrades who deploy this website.

you need a domain name and a certificate for this domain name, then you can change it to https

https is a security protocol that needs to be applied for. Some service providers have such applications. For example, Tencent Cloud and Aliyun

Server configuration problem http is port 80 https is port 443 if you do not want users to access the browser prompts https to apply for ssl Certificate

this is not a question of who will do it in the front and background. Is to apply for a certificate

Local development mode:

vue.config.js

module.exports = {
  ...,
  devServer: {
    https: true
  }
}

production mode:

Let the colleague in charge of deployment apply for the https certificate.

you can refer to the demo, you just made: https://www.erdangjiade.com/p.

webpack, development environment

:
<ul><li>:</li></ul>
 openssl-self-signed-certificate
const selfSigned = require('openssl-self-signed-certificate');
module.exports = {
  devServer: {
    https: {
        key: selfSigned.key,
        cert: selfSigned.cert
    }
  }
};
 
 method 2: 
 
 generate a self-signed certificate via openssl (from someone else on the Internet) 
openssl genrsa -out private.key 1024
openssl req -new  -key private.key -out cert.csr
openssl req -new -x509 -key private.key -out certificate.crt -days 365
 you can then load the certificate in the configuration file 
const fs = require('fs');
module.exports = {
  devServer: {
    https: {
        key: fs.readFileSync('./ca/private.key'),
        cert: fs.readFileSync('./ca/certificate.crt'),
        ca: fs.readFileSync('./ca/certificate.crt'),
    }
  }
};
 where  / ca  is the directory where the locally generated certificate is placed and is located under the project root.