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

news2025/3/18 3:16:20

解决在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
})