前端使用Nuxt框架,配置本地https訪問

甜甜圓圓圈圈發表於2020-04-01

需求:

因部分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配置成功。
服務啟動成功

相關文章