当前位置：首页 > news >正文

hbuilderx本地调试h5 vue应用的时候，怎么使用https证书？

news 来源：原创 2024/11/16 19:40:58

使用uniapp在本地开发的时候，有时候是需要有https证书的，不然会提示证书错误。像camera的授权使用，还有gps地理位置的授权使用。如果没有https证书是很麻烦的。

那么可以在hbuilderx调试h5的使用https，而不是http呢？是可以的。

找到mainfest.json文件，在h5字段里添加


 "devServer": {
            "https": true
        },

这样就会使用https了。但是有了新的问题是https但是证书是错误，需要我们自己生成一个证书，并指定使用自己的证书。

mkcert是一款用于创建本地TLS证书的工具。在Mac上安装mkcert非常简单. 我们这里使用这个工具生成，你也可以寻找其它的办法生成。

安装mkcert

brew install mkcert

在命令行里切换到你要放的目录下，然后可以使用以下命令创建名为“localhost”的TLS证书：

mkcert localhost

这将创建包含证书和密钥的文件，分别为localhost.pem和localhost-key.pem。您可以使用这些文件在本地调试时保护https连接。

请注意，本地TLS证书仅用于本地开发和测试，不能用于生产环境。在部署PWA到生产环境时，您应该使用来自可信CA的正式TLS证书。

mainfest.json的配置文件修改如下：

"devServer": {
            "https": true,
            "cert": "./localhost.pem",
            "key": "./localhost-key.pem"
        },

测试一下，hbuildx没有成功跑起来。。。。

得到以下错误

ERROR  Error: error:0909006C:PEM routines:get_name:no start line
09:35:42.252 Error: error:0909006C:PEM routines:get_name:no start line
09:35:42.253     at node:internal/tls/secure-context:69:13
09:35:42.266     at Array.forEach (<anonymous>)
09:35:42.267     at setCerts (node:internal/tls/secure-context:67:3)
09:35:42.281     at configSecureContext (node:internal/tls/secure-context:156:5)
09:35:42.282     at Object.createSecureContext (node:_tls_common:121:3)
09:35:42.319     at Server.setSecureContext (node:_tls_wrap:1349:27)
09:35:42.323     at Server (node:_tls_wrap:1208:8)
09:35:42.335     at new Server (node:https:73:3)
09:35:42.336     at Object.createServer (node:https:109:10)
09:35:42.350     at Server.createServer (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack-dev-server/lib/Server.js:677:35)
09:35:42.365     at new Server (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack-dev-server/lib/Server.js:128:10)
09:35:42.404     at serve (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/commands/serve.js:191:16)
09:35:42.420     at processTicksAndRejections (node:internal/process/task_queues:96:5)

这个错误是提示证书有问题。

可以使用openssl工具来检查mkcert生成的TLS证书是否有问题。

openssl x509 -in <certificate-file> -text -noout

检查是有问题。那有可能是mkcert生成的证书有问题，mkcert -h 查看使用文档。发现还要安装一个本地ca才行。 Install the local CA in the system trust store.

mkcert -install

Usage of mkcert:

	$ mkcert -install
	Install the local CA in the system trust store.

	$ mkcert example.org
	Generate "example.org.pem" and "example.org-key.pem".

	$ mkcert example.com myapp.dev localhost 127.0.0.1 ::1
	Generate "example.com+4.pem" and "example.com+4-key.pem".

	$ mkcert "*.example.it"
	Generate "_wildcard.example.it.pem" and "_wildcard.example.it-key.pem".

	$ mkcert -uninstall
	Uninstall the local CA (but do not delete it).

但是，还是不行，一样的错误。现在我用openssl测试是证书是没问题了的。怎么办呢？

搜索资料，突然发现一个可能的解决办法。直接把证书内容放到配置文件里，注意这里要把换行符替换成\n

配置的样式如下，请替换成对应的自己的证书内容。

"devServer": {
            "https": true,
            // "cert": "./localhost.pem",
            // "key": "./localhost-key.pem"
            "cert": "-----BEGIN CERTIFICATE-----\nMIIEKzCCApOgAwIBAgIRALCSuo4XPQxpEXinUDlZDk8wDQYJKoZIhvcNAQELBQAw\nczEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMSQwIgYDVQQLDBt3YW5n\n-----END CERTIFICATE-----\n",
            "key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCl8ZHeJ4d9OMIj\nYwyqJYRokRH/hMUVr5ljZIihpGPunaNHVXIL0DTzeokeocYhXywNzCWTpfCZpVzO\nZvG2EG/7TNHvqxn3gZzhTNyYoL7RRe9w/bQtHRF6fqJMn5PXu9Rqa3CeGDc1bjVC\n3yrafIS33n70OHWhMIw13QLuYcnSPb8zG+FEamg5rMeSKrHXw1WlZasaMLs26SQV\nuv7N7uKE3H6N89I1ZwFjgBiETRYWLmC6xKSkyKdbr4BlULvUaLSX0lTJgLedYo4v\nZ4xa97vsb61WVqzLhY0/XCPC0B3BLLKfX8zkNJX6IkA/UmwQfegUV6TRMKV0EAjq\n\n-----END PRIVATE KEY-----\n"
        },

重新启动本地调试。ok. 可以正常运行了。

为什么使用相对路径不行呢？是不是可以使用绝对路径。有了解的同学可以说下有没有更好解决办法。

附

devServer字段是hbuildx的manifest.json文件中的一个对象，用于配置开发服务器的相关选项。下面是devServer对象中可用的所有字段及其作用：

port：开发服务器的端口号。
baseUrl：开发服务器的基本URL。
https：如果设置为true，则开发服务器将使用https协议。
cert：用于保护https连接的TLS证书。
key：用于保护https连接的TLS密钥。
headers：开发服务器应在响应中设置的标头。
compress：如果设置为true，则开发服务器将启用压缩。
progress：如果设置为true，则开发服务器将显示构建进度。
proxy：用于代理请求的配置对象。

例如，以下是一个示例manifest.json文件，其中包含devServer字段：

{
  "name": "My PWA",
  "short_name": "My PWA",
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "devServer": {
    "port": 8080,
    "baseUrl": "/",
    "https": true,
    "cert": "./localhost.pem",
    "key": "./localhost-key.pem",
    "headers": {
      "X-Custom-Header": "CustomValue"
    },
    "compress": true,
    "progress": true,
    "proxy": {
      "/api": {
        "target": "http://api.example.com"
      }
    }
  }
}

上面的示例配置中，开发服务器的端口号为8080，基本URL为“/”，将使用https协议