uniapp开发环境如何启用https协议

在uniapp开发环境中如何启用https协议？我需要在本地调试时使用https，但不知道具体该怎么配置。尝试过修改manifest.json和vue.config.js文件，但一直不成功。请问有没有详细的步骤说明或常见的配置示例？

2 回复

在H5平台下，可以在manifest.json中配置devServer的https选项为true，并生成SSL证书。或者使用mkcert工具生成本地证书。


在 UniApp 开发环境中启用 HTTPS 协议，主要涉及配置本地开发服务器（如 HBuilderX 内置服务器或 Vue CLI）支持 HTTPS。以下是具体步骤：

方法一：使用 HBuilderX 内置服务器（推荐）

  1. 生成 SSL 证书：

    • 创建自签名证书（仅开发环境使用）：
      # 生成私钥和证书（安装 OpenSSL 后执行）
openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes
    • 按提示填写信息（如域名可填 localhost）。

  2. 配置 HBuilderX：

    • 将生成的 key.pem 和 cert.pem 文件放置到项目根目录。
    • 在 manifest.json 的源码视图中添加：
      "h5": {
  "devServer": {
    "https": {
      "key": "./key.pem",
      "cert": "./cert.pem"
    }
  }
}
    • 重启 HBuilderX 服务器，访问 https://localhost:端口号。

方法二：使用 Vue CLI 运行项目

若通过 vue-cli 启动项目：

  1. 在项目根目录创建 vue.config.js 文件（若无）。
  2. 配置 HTTPS：
    const fs = require('fs');
module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('./key.pem'),
      cert: fs.readFileSync('./cert.pem')
    },
    port: 8080 // 自定义端口
  }
};
  3. 运行 npm run dev 或 yarn serve。

注意事项：

  • 浏览器安全警告：自签名证书会触发浏览器“不安全”提示，手动点击“继续访问”即可。
  • 真机调试：需确保手机和电脑在同一局域网，且用电脑 IP 访问（如 https://192.168.x.x:8080）。
  • 生产环境：部署到服务器时，需使用可信 CA 颁发的证书（如 Let‘s Encrypt）。

验证方法：

  • 在浏览器中打开 https://localhost:端口，确认地址栏显示锁形图标（尽管提示不安全）。

通过以上步骤，即可在开发环境中启用 HTTPS，解决部分 API 要求安全上下文（如 Geolocation）的问题。

回到顶部