vue.config.js

const fs = require('fs')
module.exports = {
//...
  devServer: {
    // https: true  // 使用 webpack 內(nèi)置的證書
    https: {
      key: fs.readFileSync(path.join(__dirname, 'ssl/private.key')),
      cert: fs.readFileSync(path.join(__dirname, 'ssl/certificate.crt'))
    }
  },
}

package.json

  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
  },

1.首先確保你在項(xiàng)目根目錄下,然后創(chuàng)建ssl文件夾

# 創(chuàng)建 ssl 目錄
mkdir ssl

# 生成自簽名證書
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ssl/private.key -out ssl/certificate.crt

2.然后生成自簽名證書,執(zhí)行以下命令:

Country Name (2 letter code) [AU]: CN
State or Province Name (full name) [Some-State]: Zhejiang    # 你所在的省份
Locality Name (eg, city) []: Hangzhou                        # 你所在的城市
Organization Name (eg, company) [Internet Widgits Pty Ltd]: YourCompany  # 你的公司名
Organizational Unit Name (eg, section) []: Development       # 部門名稱
Common Name (e.g. server FQDN or YOUR name) []: localhost   # 這里填localhost
Email Address []: your.email@example.com                    # 你的郵箱

如果提示:'openssl' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序

這個(gè)問題就需要去OpenSSL的官方網(wǎng)站，安裝后，再添加 OpenSSL 到環(huán)境變量，添加步驟：
1.打開控制面板，進(jìn)入“系統(tǒng)與安全” > “系統(tǒng)” > “高級(jí)系統(tǒng)設(shè)置” > “環(huán)境變量”。
2.在系統(tǒng)變量中找到名為 Path 的變量，雙擊編輯。
3.添加 OpenSSL 的安裝路徑，比如我的是 D:\Program Files\OpenSSL-Win64\bin，然后點(diǎn)擊“確定”。

完成這些步驟后:

1. 檢查 ssl 文件夾中是否生成了兩個(gè)文件:

• private.key
• certificate.crt

2. 重啟開發(fā)服務(wù)器:

npm run serve

現(xiàn)在你應(yīng)該可以通過 HTTPS 訪問你的開發(fā)服務(wù)器了:

• 本機(jī)訪問: https://localhost:端口號(hào)
• 手機(jī)訪問: https://你電腦的IP地址:端口號(hào)