在 Windows 上使用 choco 安装 mkcert 并配置 Vue 运行HTTPS

解决在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 是一个非常实用的工具。