廉价网站建设网络推广业务
解决在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。
- 重启浏览器或清除缓存。
步骤总结: 完整流程总结
- 安装 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 是一个非常实用的工具。