在 Windows 上使用 choco 安装 mkcert 并设置 Vue 运行HTTPS
解决在Windows上使用Vue当地运行HTTPS的问题,vue-cli或vite都可以使用步调 1：确认 Chocolatey 是否已安装
1. 查抄 choco 下令是否可用
打开 PowerShell（管理员权限），输入：
choco -v
[*] 如果显示版本号（如 2.4,3），说明已安装 Chocolatey。
https://i-blog.csdnimg.cn/direct/916f9a03d77d4dad872661636a8c5586.png
[*] 如果提示 下令未找到，需先安装 Chocolatey。
步调 2：安装 Chocolatey（如未安装）
1. 以管理员身份运行 PowerShell
右键点击 PowerShell 图标，选择 以管理员身份运行。
2. 执行安装下令
在 PowerShell 中输入：
Set-ExecutionPolicy Bypass -Scope Process -Force
::SecurityProtocol = ::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
或
Set-ExecutionPolicy Bypass -Scope Process -Force; ::SecurityProtocol = ::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
[*]此下令会绕过执行计谋并安装 Chocolatey。
3. 验证安装
输入 choco -v
或 choco --version，应显示版本号。
https://i-blog.csdnimg.cn/direct/93e13764702c47adb24bde3c8d085497.png
其他的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下令
https://i-blog.csdnimg.cn/direct/90c4df940bf246349dd2cc7a3641d161.png
步调 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
。
[*]重启浏览器或清除缓存。
步调总结: 完整流程总结
[*]安装 Chocolatey（如未安装）。
[*]通过 choco 安装 mkcert。
[*]天生并信任当地证书。
[*]设置 Vue 项目使用证书。
[*]启动 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 是一个非常实用的工具。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]