使用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证书？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。