uniapp本地运行如何配置https环境

在uniapp开发中，本地运行时如何配置https环境？我尝试在HBuilderX中运行到浏览器，但接口请求总是被跨域拦截。是否需要修改manifest.json配置，或者要安装本地SSL证书？求具体操作步骤和注意事项。

2 回复

在uniapp中配置https本地运行，可在HBuilderX中设置：打开manifest.json，选择“源码视图”，在h5配置中添加"devServer": {"https": true}。或使用mkcert生成本地证书，配置devServer的https选项指向证书文件。


在 UniApp 中配置本地 HTTPS 环境，主要是为了在开发过程中测试需要 HTTPS 的功能（如摄像头、地理位置等）。以下是详细步骤，基于常见的开发工具 HBuilderX 和本地服务器配置：

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

  1. 生成 SSL 证书：

    • 创建自签名证书（仅用于开发）。在命令行中运行：
      # 生成私钥（如 key.pem）
openssl genrsa -out key.pem 2048
# 生成证书（如 cert.pem）
openssl req -new -x509 -key key.pem -out cert.pem -days 365
      按提示填写信息（可随意填写，但 Common Name 建议用 localhost）。

  2. 配置 HBuilderX：

    • 打开 HBuilderX，进入菜单 运行 → 运行到浏览器 → 配置 Web 服务器。
    • 在设置中，勾选 启用 HTTPS，并指定生成的 cert.pem 和 key.pem 文件路径。
    • 保存配置后，重新运行项目。浏览器将使用 https://localhost:端口号 访问。

方法二：使用本地代理工具（如 mkcert）

  1. 安装 mkcert（简化证书生成）：

    • 访问 mkcert GitHub 安装工具。
    • 在命令行中运行：
      # 安装本地 CA
mkcert -install
# 为 localhost 生成证书
mkcert localhost
      生成 localhost.pem（证书）和 localhost-key.pem（私钥）。

  2. 配置开发服务器：

    • 如果使用自定义服务器（如 Node.js），在代码中加载证书：
      const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('path/to/localhost-key.pem'),
  cert: fs.readFileSync('path/to/localhost.pem')
};
https.createServer(options, app).listen(8080);
    • 在 HBuilderX 中，将运行基路径改为 https://localhost:8080。

注意事项：

  • 浏览器警告：自签名证书会触发“不安全”警告，在浏览器中点击“高级”并继续访问即可。
  • 真机调试：若需真机 HTTPS 访问，确保手机和电脑在同一局域网，并用电脑 IP（如 https://192.168.x.x:端口）访问。可能需要将证书安装到手机信任库。
  • 生产环境：此配置仅用于开发，正式部署需使用可信证书（如 Let’s Encrypt）。

完成以上步骤后，即可在本地 HTTPS 环境下运行和测试 UniApp 项目。如有问题，检查证书路径和端口配置是否正确。

回到顶部