在前端本地開發環境中使用 HTTPS 主要取決于你用的是哪個構建工具（如 Vite、Webpack、Vue CLI 等）。

Vite

npm install --save-dev @types/node #安裝 Node 類型定義
#@types/node 提供了 Node.js 內置模塊的完整類型定義，TypeScript 編譯器才能正確識別它們。npm install mkcert --save-dev#生成HTTPS本地證書 執行一次即可
npx mkcert create-ca
npx mkcert create-cert
#在項目中生成 cert.pem 和 key.pem 文件。
#證書一旦生成，無法修改，只能重新生成證書
npx mkcert create-cert --ca-key rootCA-key.key --ca-cert rootCA.crt localhost 127.0.0.1 mydomain.com
#--ca-key 指定上一步生成的 CA 私鑰文件
#--ca-cert 指定 CA 證書文件
#后面的參數就是你想包含進證書的域名或 IP，可以多個

//打開 tsconfig.node.json，檢查是否有 "types": ["node"]，如果沒有，添加進去。
{"compilerOptions": {"module": "ESNext","target": "ESNext","moduleResolution": "Node","types": ["node"]//內置node模塊 這里??}
}//修改 vite.config.ts 或 vite.config.js
import { defineConfig } from 'vite'import fs from 'fs'
import path from 'path'//這里??import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {https: {//這里??key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt')),},host: 'localhost', // 或 0.0.0.0port: 5173,},
})

yarn dev  # 或 npm run dev

瀏覽器訪問 https://localhost:5173，你需要信任證書（第一次訪問會提示“不安全”，點擊繼續即可）。

文件名	含義
cert.crt	服務端的證書（公鑰）
ca.crt	根證書（自簽名時的 CA 證書）
cert.key	私鑰（用來與 cert.crt 搭配）

# cert.key
-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----#cert.crt
-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----

• ca.crt是可選的，除非你想讓瀏覽器信任你自簽的證書鏈。
  把你的 ca.crt 安裝進系統或瀏覽器的信任根證書列表

macOS:用鑰匙串訪問（Keychain Access）導入

1. 打開「鑰匙串訪問」App
2. 拖入你的 ca.crt
3. 設置「始終信任」

Windows:
4. 運行 certmgr.msc
5. 選擇「受信任的根證書頒發機構」→「證書」
6. 右鍵選擇「導入」→ 選擇你的 ca.crt
7. 安裝完成后，重新啟動瀏覽器

不再顯示不信任的警告 🚫🔒

Webpack

//在 webpack-dev-server 中啟用 HTTPS：
// webpack.config.js
devServer: {https: true,host: 'localhost',port: 3000,
}//配置自定義證書
https: {key: fs.readFileSync('./key.pem'),cert: fs.readFileSync('./cert.pem'),
},

本地生產環境 npx serve

serve 本身是支持 HTTPS 的，只需要加參數

npx serve -s dist --ssl-cert cert.pem --ssl-key key.pem

• 兩個工具之間的關系
  從功能角度來說，如果你用的是 Vite，用 vite preview 就完全可以替代 npx serve dist 來預覽構建后的靜態文件，而且 vite preview 是 Vite 官方集成的命令，兼容性和配置體驗更好。推薦用 vite preview 來預覽生產構建，特別是如果你要用 HTTPS，vite preview 支持直接配置更方便。
  如果vite preview找不到，使用npx vite preview

工具	作用	需不需要卸載？
Vite	開發和構建工具，yarn dev 啟動開發服務器，yarn build 生成靜態文件	不能卸載，是你項目核心構建工具
npx serve	一個簡單的靜態文件服務器，用來本地預覽構建后生成的 dist 目錄	不用卸載，方便快速預覽，但不是必須

npm uninstall -g serve卸載，可選清理緩存npm cache clean --force，這樣npx serve dist 命令不再起作用

瀏覽器提示“不安全”解決方法

由于是自簽證書，瀏覽器默認會提示不安全；
點擊「高級」→「繼續訪問」即可；
若你希望不再提示，需要手動將 .pem 證書導入系統信任證書中。

上傳github注意不要把key傳上去

把證書文件（比如 .pem、.key、.crt）加入 .gitignore，避免誤上傳。
使用環境變量或安全的配置管理方式來管理證書路徑。
如果一定要存儲證書，建議放在私有倉庫或使用加密方式。
生產環境使用云服務或服務器的證書管理（如 Let’s Encrypt）來自動管理證書。

# 忽略證書和私鑰
*.pem
*.key
*.crt