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

解决在Windows上使用Vue当地运行HTTPS的问题,vue-cli或vite都可以使用
步调 1：确认 Chocolatey 是否已安装

1. 查抄 choco 下令是否可用

打开 PowerShell（管理员权限），输入：

1. choco -v

复制代码

• 如果显示版本号（如 2.4,3），说明已安装 Chocolatey。
  
  
  
  
• 如果提示 下令未找到，需先安装 Chocolatey。
  

步调 2：安装 Chocolatey（如未安装）

1. 以管理员身份运行 PowerShell

右键点击 PowerShell 图标，选择 以管理员身份运行。
2. 执行安装下令

在 PowerShell 中输入：

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

复制代码

或

1. 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（管理员）中运行：

1. choco install mkcert

复制代码

• 按提示输入 Y 确认安装。
  

2. 初始化当地证书存储

1. mkcert -install

复制代码

• 此操作会将 mkcert 的根证书添加到体系信任列表，解决浏览器告诫。
  

步调 4：为当地开辟天生证书

1. 天生 localhost 证书

1. mkcert localhost

复制代码

• 天生两个文件：localhost.pem（证书）和 localhost-key.pem（私钥）。
  
• 也可以将两个文件放入一个文件夹下，比如创建http_ssl文件夹，然后目次切换到改文件夹执行mkcert下令
  
  
  
  

步调 5：设置 Vue 项目使用 HTTPS

1. 项目设置

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

在项目根目次创建或修改 vue.config.js，添加以下内容：

1. const fs = require("fs");
2. const path = require("path");
4. module.exports = {
5.   devServer: {
6.     https: {
7.       key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
8.       cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem")),
9.     },
10.     // port: 8080 // 可选，指定端口
11.   },
12. };

复制代码

2. vite修改vite.config.js

在项目根目次创建或修改 vite.config.js，添加以下内容：

1. import path from 'path'
2. import fs from 'fs'
3. import { defineConfig} from 'vite'
4. export default defineConfig(({ command, mode }) => {
5.         const config = {
6.                 server: {
7.                         https: {
8.                          // 'https_ssl/localhost-key.pem' 为第四步生产localhost-key.pem文件的位置
9.                       key: fs.readFileSync(path.resolve(__dirname, 'https_ssl/localhost-key.pem')),
10.                       // 'https_ssl/localhost.pem' 为第四步生产localhost.pem文件的位置
11.                       cert: fs.readFileSync(path.resolve(__dirname, 'https_ssl/localhost.pem'))
12.                     }
13.                 }
14.         }
15.         return config
16. })

复制代码

2. 重启 Vue 开辟服务器

1. 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
  。
  
• 重启浏览器或清除缓存。
  

---

步调总结: 完整流程总结

• 安装 Chocolatey（如未安装）。
  
• 通过 choco 安装 mkcert。
  
• 天生并信任当地证书。
  
• 设置 Vue 项目使用证书。
  
• 启动 HTTPS 服务。
  

通过以上步调，即可在 Windows 上安全地通过 HTTPS 运行 Vue 项目。
扩展：使用 choco 下令

安装 Chocolatey 后，你可以使用 choco 下令来安装、更新和管理软件包。
常用下令：

安装软件包：

1. choco install <package-name>

复制代码

例如，安装 git：

1. choco install git

复制代码

升级软件包：

1. choco upgrade <package-name>

复制代码

卸载软件包：

1. choco uninstall <package-name>

复制代码

搜索软件包：

1. choco search <keyword>

复制代码

列出已安装的软件包：

1. choco list --local-only

复制代码

示例：安装 OpenSSL

如果你需要安装 OpenSSL（例如用于天生 SSL 证书），可以使用以下下令：

1. choco install openssl

复制代码

安装完成后，你可以通过以下下令验证是否安装成功：

1. openssl version

复制代码

更新 Chocolatey

如果需要更新 Chocolatey 自己，可以运行以下下令：

1. choco upgrade chocolatey

复制代码

卸载 Chocolatey

如果你不再需要 Chocolatey，可以通过以下下令卸载：

1. choco uninstall chocolatey

复制代码

留意事项

• Chocolatey 默认会将软件包安装到 C:\ProgramData\chocolatey\lib 目次。
  
• 安装某些软件包时，可能需要管理员权限。
  
• 如果你在使用 choco 下令时遇到问题，可以尝试以管理员身份运行 PowerShell 或 CMD。
  

---

通过 Chocolatey，你可以更方便地管理和安装 Windows 上的软件包，包括开辟工具、实用程序等。如果你经常在 Windows 上开辟，Chocolatey 是一个非常实用的工具。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。