使用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
检查是有问题。那有可能是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协议
好文阅读
发表评论