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

发布于:2025-03-17 ⋅ 阅读:(20) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到