前端使用Nuxt框架,配置本地https訪問
需求:
因部分API需要https才能實現,所以需要配置本地開發環境的https訪問;
步驟:
1、生成本地使用的https證照;
2、在nuxt.config.js中引入證照;
第一步:在cmd視窗下
1、下載證照生成庫
npm install -g mkcert
2、建立證照頒發機構
mkcert create-ca
建立成功後如圖所示
3、建立證照
mkcert create-cert
建立成功後如圖所示
4、找到證照檔案
根據建立提示找到對應的證照檔案,複製並貼上至Nuxt專案的根目錄下
第二步:Nuxt專案內的 nuxt.config.js檔案內
1、下載path和fs庫
npm i fs
npm i path
2、引入fs和path
import path from 'path'
import fs from 'fs'
3、配置https服務
module.exports = {
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt'))
}
}
}
4、執行專案,https配置成功。
相關文章
- phpstudy配置本地ssl證照,訪問https://127.0.0.1PHPHTTP127.0.0.1
- WebSphere配置https協議訪問WebHTTP協議
- nginx配置https協議訪問NginxHTTP協議
- nginx 專案配置 https 訪問NginxHTTP
- 如何使用自籤CA配置HTTPS加密反向代理訪問?HTTP加密
- VuePress 部落格如何開啟本地 HTTPS 訪問VueHTTP
- Nginx配置VUE專案Https訪問NginxVueHTTP
- 如何用nginx配置https加密訪問?NginxHTTP加密
- tomcat8配置https協議訪問TomcatHTTP協議
- nginx配置ssl實現https訪問 小白文NginxHTTP
- 配置Ingress支援HTTPS訪問(二):使用cert-manager申請證書HTTP
- 使用docker搭建最新版本的gitea,並配置HTTPS訪問DockerGitHTTP
- Kubernetes叢集中配置Ingress支援HTTPS訪問(一):cfsslHTTP
- Tomcat全域性/區域性https訪問配置方法TomcatHTTP
- [譯]使用Laravel訪問前端CookieLaravel前端Cookie
- Harbor設定https訪問HTTP
- kubernetes使用traefik的https方式訪問web應用HTTPWeb
- 使用CloseableHttpClient 訪問 http 和https 的get請求HTTPclient
- http 升級為 https 訪問HTTP
- 使用openssl在windows 10下本地xampp配置https開發環境WindowsHTTP開發環境
- 在本地環境配置 https 證書(mac)HTTPMac
- 怎樣使用holer從外網訪問本地TomcatTomcat
- 外網訪問本地sqlserverSQLServer
- 本地Tomcat外網訪問Tomcat
- 本地訪問虛擬機器(Vmware)環境下配置的域名虛擬機
- 使用 updateAppConfig 更新 Nuxt 應用配置APPUX
- Swift iOS : 訪問 https 伺服器SwiftiOSHTTP伺服器
- IIS7/IIS8環境下全站https訪問的配置方法HTTP
- 本地站點無法訪問
- 本地網站外網訪問網站
- Flutter 入門-本地訪問-MethodChannelFlutter
- 訪問本地的公網ip
- 前端配置本地代理方法總結前端
- 前端域名訪問頁面中的一些配置項前端
- Chrome訪問https頁面顯示ERR_CERT_INVALID,且無法跳過繼續訪問 本地證書過期處理ChromeHTTP
- chorme訪問https的一個報錯ORMHTTP
- ElasticSearch7.10的單機https訪問ElasticsearchHTTP
- 使用ngrok讓你的本地Web程式外網可訪問Web