解決在Windows上使用Vue本地運行HTTPS的問題,vue-cli或vite都可以使用

步驟 1：確認 Chocolatey 是否已安裝

1. 檢查 choco 命令是否可用

打開 PowerShell（管理員權限），輸入：

choco -v

• 如果顯示版本號（如 2.4,3），說明已安裝 Chocolatey。
  

• 如果提示 命令未找到，需先安裝 Chocolatey。

步驟 2：安裝 Chocolatey（如未安裝）

1. 以管理員身份運行 PowerShell

右鍵點擊 PowerShell 圖標，選擇 以管理員身份運行。

2. 執行安裝命令

在 PowerShell 中輸入：

Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

或

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

• 此命令會繞過執行策略并安裝 Chocolatey。

3. 驗證安裝

輸入 choco -v 或 choco --version，應顯示版本號。

其他的choco命令在文章末尾有 使用例子

步驟 3：使用 choco 安裝 mkcert

1. 安裝 mkcert

在 PowerShell（管理員）中運行：

choco install mkcert

• 按提示輸入 Y 確認安裝。

2. 初始化本地證書存儲

mkcert -install

• 此操作會將 mkcert 的根證書添加到系統信任列表，解決瀏覽器警告。

步驟 4：為本地開發生成證書

1. 生成 localhost 證書

mkcert localhost

• 生成兩個文件：localhost.pem（證書）和 localhost-key.pem（私鑰）。
• 也可以將兩個文件放入一個文件夾下，比如創建http_ssl文件夾，然后目錄切換到改文件夾執行mkcert命令
  

步驟 5：配置 Vue 項目使用 HTTPS

1. 項目配置

1. vue-cli修改 vue.config.js

在項目根目錄創建或修改 vue.config.js，添加以下內容：

const fs = require("fs");
const path = require("path");module.exports = {devServer: {https: {key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem")),},// port: 8080 // 可選，指定端口},
};

2. vite修改vite.config.js

在項目根目錄創建或修改 vite.config.js，添加以下內容：

import path from 'path'
import fs from 'fs'
import { defineConfig} from 'vite'
export default defineConfig(({ command, mode }) => {const config = {server: {https: {// 'https_ssl/localhost-key.pem' 為第四步生產localhost-key.pem文件的位置key: fs.readFileSync(path.resolve(__dirname, 'https_ssl/localhost-key.pem')),// 'https_ssl/localhost.pem' 為第四步生產localhost.pem文件的位置cert: fs.readFileSync(path.resolve(__dirname, 'https_ssl/localhost.pem'))}}}return config
})

2. 重啟 Vue 開發服務器

npm run serve

3. 訪問 HTTPS 地址

打開瀏覽器訪問：（端口和localhost 根據項目運行ip和端口修改）
https://localhost:8080

• 瀏覽器應顯示安全鎖圖標（無警告）。

---

常見問題解決

1. choco 安裝失敗

• 確保使用管理員權限運行 PowerShell。
• 檢查網絡是否允許下載腳本（某些企業網絡可能攔截）。

2. 證書生成路徑錯誤

• 確認 localhost.pem 和 localhost-key.pem 在項目根目錄。
• 如果文件在其他位置，修改 vue(vite).config.js 中的路徑。

3. 瀏覽器仍提示不安全

• 確保運行了 mkcert -install。
• 重啟瀏覽器或清除緩存。

---

步驟總結: 完整流程總結

1. 安裝 Chocolatey（如未安裝）。
2. 通過 choco 安裝 mkcert。
3. 生成并信任本地證書。
4. 配置 Vue 項目使用證書。
5. 啟動 HTTPS 服務。

通過以上步驟，即可在 Windows 上安全地通過 HTTPS 運行 Vue 項目。

擴展：使用 choco 命令

安裝 Chocolatey 后，你可以使用 choco 命令來安裝、更新和管理軟件包。

常用命令：

安裝軟件包：

choco install <package-name>

例如，安裝 git：

choco install git

升級軟件包：

choco upgrade <package-name>

卸載軟件包：

choco uninstall <package-name>

搜索軟件包：

choco search <keyword>

列出已安裝的軟件包：

choco list --local-only

示例：安裝 OpenSSL

如果你需要安裝 OpenSSL（例如用于生成 SSL 證書），可以使用以下命令：

choco install openssl

安裝完成后，你可以通過以下命令驗證是否安裝成功：

openssl version

更新 Chocolatey

如果需要更新 Chocolatey 本身，可以運行以下命令：

choco upgrade chocolatey

卸載 Chocolatey

如果你不再需要 Chocolatey，可以通過以下命令卸載：

choco uninstall chocolatey

注意事項

• Chocolatey 默認會將軟件包安裝到 C:\ProgramData\chocolatey\lib 目錄。
• 安裝某些軟件包時，可能需要管理員權限。
• 如果你在使用 choco 命令時遇到問題，可以嘗試以管理員身份運行 PowerShell 或 CMD。

---

通過 Chocolatey，你可以更方便地管理和安裝 Windows 上的軟件包，包括開發工具、實用程序等。如果你經常在 Windows 上開發，Chocolatey 是一個非常實用的工具。