欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

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

发布时间：2024/3/24 vue 92 豆豆
生活随笔 收集整理的这篇文章主要介绍了 hbuilderx本地调试h5 vue应用的时候，怎么使用https证书？ 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

使用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 -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协议  

总结

以上是生活随笔为你收集整理的hbuilderx本地调试h5 vue应用的时候，怎么使用https证书？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。