vue项目本地开启https访问模式，手机也能访问

vue.config.js

const fs = require('fs')
module.exports = {
//...
  devServer: {
    // https: true  // 使用 webpack 内置的证书
    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.首先确保你在项目根目录下,然后创建ssl文件夹

# 创建 ssl 目录
mkdir ssl

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

2.然后生成自签名证书,执行以下命令:

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' 不是内部或外部命令，也不是可运行的程序

这个问题就需要去OpenSSL的官方网站，安装后，再添加 OpenSSL 到环境变量，添加步骤：
1.打开控制面板，进入“系统与安全” > “系统” > “高级系统设置” > “环境变量”。
2.在系统变量中找到名为 Path 的变量，双击编辑。
3.添加 OpenSSL 的安装路径，比如我的是 D:\Program Files\OpenSSL-Win64\bin，然后点击“确定”。

完成这些步骤后:

1. 检查 ssl 文件夹中是否生成了两个文件:

• private.key
• certificate.crt

2. 重启开发服务器:

npm run serve

现在你应该可以通过 HTTPS 访问你的开发服务器了:

• 本机访问: https://localhost:端口号
• 手机访问: https://你电脑的IP地址:端口号