uniapp 本地如何开启https服务

在uniapp开发中，本地调试时如何开启https服务？我需要在真机调试时使用https协议，但不知道具体配置方法。尝试过修改manifest.json和本地服务器配置，但一直不成功。请问有没有详细的步骤说明或推荐的工具？

2 回复

在HBuilderX中，点击运行 -> 运行到内置浏览器 -> 勾选“启用https服务”即可。


在 UniApp 开发中，本地开启 HTTPS 服务通常用于调试需要 HTTPS 环境的功能（如部分 API 或 WebView）。以下是两种常用方法：

方法一：使用 mkcert 工具（推荐）

  1. 安装 mkcert
    访问 https://github.com/FiloSottile/mkcert 下载对应系统的版本，或通过包管理器安装（如 macOS：brew install mkcert）。

  2. 生成本地证书
    在终端执行：

    mkcert -install
mkcert localhost 127.0.0.1 ::1

    生成 localhost+2.pem（证书）和 localhost+2-key.pem（私钥）。

  3. 配置开发服务器

    • HBuilderX：在 manifest.json 的「开发设置」中勾选「启用 HTTPS」，并指定证书和私钥路径。
    • Vue CLI：在 vue.config.js 中配置：
      module.exports = {
  devServer: {
    https: {
      key: './localhost+2-key.pem',
      cert: './localhost+2.pem',
    },
    host: 'localhost',
    port: 8080
  }
};

方法二：使用内置开发服务器（HBuilderX）

  1. 打开项目，点击菜单栏「运行」→「运行到浏览器」→「自定义浏览器」。
  2. 在弹出窗口中配置 HTTPS 端口（如 443）并勾选「HTTPS」。
  3. HBuilderX 会自动生成临时证书，但浏览器可能会提示不安全，需手动点击「继续访问」。

注意事项

  • 部分功能（如摄像头）需在真机调试，本地 HTTPS 仅用于浏览器环境。
  • 若遇证书错误，可尝试清除浏览器缓存或重启开发服务器。

通过以上步骤即可在本地启用 HTTPS 服务进行调试。

回到顶部