Vite 使用 https 憑證服務方法(搭 mkcert )

malagege included in Vue

2021-07-04 187 words One minute

Contents

現在很多開發都需要 HTTPS ，但是在 localhost 預設是沒有 HTTPS，要怎麼在 Vite 快速在開發環境用 HTTPS？爬了一些 Google 文章，來記錄一下。

舊文使用方式

[Vite] Enabling https on localhost - DEV Community

安裝 vite-plugin-mkcert

vite-plugin-mkcert/README-zh_CN.md at main · liuweiGL/vite-plugin-mkcert

安裝 vite-plugin-mkcert vite & mkcert

Windows 使用 Administrator 帳號安裝 mkcert!!
Windows 使用 Administrator 帳號安裝 mkcert!!
Windows 使用 Administrator 帳號安裝 mkcert!!

1
2
3
4


choco install mkcert
# 安裝指令不用做，vite-plugin-mkcert 就會幫忙做
# mkcert -install
# mkcert localhost

1
2


# 沒執行過 mkcert 可以用 Administrator 執行
npm install vite-plugin-mkcert -D 

Linux 可參考FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you’d like.，步驟可能需要自己編譯

配置 vite

vite.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true
  },
  plugins: [mkcert()]
})

簡單注意:

import mkcert from 'vite-plugin-mkcert'
https: true
plugins: [mkcert()]

執行 Vite

npm run dev

第一次會跳出下面圖示，會安裝CA到電腦上面，記得按是。

如果看到不受信任網域，瀏覽器可能需要關掉重開，才能正常看到。

基本上做到這邊就完成了，如果你還有興趣可以往下看。

憑證跑去哪?

在環境變數加入下面這段

1
2
3
4


# window powershell
 $Env:DEBUG = "vite:plugin:mkcert"
# linux 
export DEBUG = "vite:plugin:mkcert"

window powershell 詳細使用環境變數方法關於環境變數 - PowerShell | Microsoft Docs

1
2
3


The certificate is saved in:
C:\Users\Administrator\.vite-plugin-mkcert\certs\dev.key
C:\Users\Administrator\.vite-plugin-mkcert\certs\dev.pem

log 打開可以看到放在家目錄。程式碼也可以看到裡面這樣寫(vite-plugin-mkcert/constant.ts at main · liuweiGL/vite-plugin-mkcert)