使用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 ()
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  -text -noout

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

mkcert -install

Usage of mkcert:$ mkcert -installInstall the local CA in the system trust store.$ mkcert example.orgGenerate "example.org.pem" and "example.org-key.pem".$ mkcert example.com myapp.dev localhost 127.0.0.1 ::1Generate "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 -uninstallUninstall 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协议