前端使用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
- nginx 專案配置 https 訪問NginxHTTP
- WebSphere配置https協議訪問WebHTTP協議
- nginx配置https協議訪問NginxHTTP協議
- VuePress 部落格如何開啟本地 HTTPS 訪問VueHTTP
- 如何使用自籤CA配置HTTPS加密反向代理訪問?HTTP加密
- Nginx配置VUE專案Https訪問NginxVueHTTP
- 如何用nginx配置https加密訪問?NginxHTTP加密
- HTTPS訪問:weblogic下配置SSLHTTPWeb
- nginx配置ssl實現https訪問 小白文NginxHTTP
- tomcat8配置https協議訪問TomcatHTTP協議
- Oracle EM Https WIndows不能訪問防火牆配置OracleHTTPWindows防火牆
- 使用docker搭建最新版本的gitea,並配置HTTPS訪問DockerGitHTTP
- restTemplate訪問httpsRESTHTTP
- Nginx配置域名同時支援 https 和 http 訪問NginxHTTP
- Centos6.3下Apache配置https證書訪問CentOSApacheHTTP
- [譯]使用Laravel訪問前端CookieLaravel前端Cookie
- Tomcat全域性/區域性https訪問配置方法TomcatHTTP
- XCode專案配置可訪問 非 https 介面的方法XCodeHTTP
- 外網訪問本地sqlserverSQLServer
- 在本地環境配置 https 證書(mac)HTTPMac
- 使用openssl在windows 10下本地xampp配置https開發環境WindowsHTTP開發環境
- 本地訪問虛擬機器(Vmware)環境下配置的域名虛擬機
- 前端配置本地代理方法總結前端
- 本地網站外網訪問網站
- Flutter 入門-本地訪問-MethodChannelFlutter
- http 升級為 https 訪問HTTP
- tomcat https訪問設定TomcatHTTP
- 前端框架現狀調查:66%受訪者使用Sass前端框架
- Nuxt常用配置項UX
- kubernetes使用traefik的https方式訪問web應用HTTPWeb
- 使用免費SSL證書讓網站支援HTTPS訪問網站HTTP
- 使用ngrok讓你的本地Web程式外網可訪問Web
- 前端域名訪問頁面中的一些配置項前端
- Swift iOS : 訪問 https 伺服器SwiftiOSHTTP伺服器
- 【訪問本地專案,localhosthost可以,本地ip不可以】localhost
- nuxt使用axios的跨域處理配置UXiOS跨域
- IIS7/IIS8環境下全站https訪問的配置方法HTTP