vue+vite项目开发环境开启https地址

本文介绍了为Vue项目配置支持IP地址的HTTPS证书的完整流程：首先使用mkcert工具生成包含IP地址的SSL证书，然后配置Vite开发服务器自动识别最新证书文件并启用HTTPS，接着将证书安装到系统的受信任根证书颁发机构，最后通过pnpm dev启动项目即可实现安全访问。整个过程涵盖了从证书生成、Vite配置到系统证书安装等关键步骤，帮助开发者快速搭建本地HTTPS开发环境。

Jimenez Min

852人浏览 · 2025-05-28 12:04:37

Jimenez Min · 2025-05-28 12:04:37 发布

一、生成支持 IP 地址的 SSL 证书

使用管理员身份打开cmd命令窗口，打开到vue项目的根目录

安装mkcert

choco install mkcert

初始化本地 CA

mkcert -install

生成证书（包含 IP 地址）
在项目根目录执行（根据自己实际的局域192ip填写）：

mkcert 192.168.1.21 localhost 127.0.0.1 ::1

生成两个文件：
192.168.1.21+3-key.pem（私钥）
192.168.1.21+3.pem（证书）
将文件后缀改为crt：
192.168.1.21+3-key.crt（私钥）
192.168.1.21+3.crt（证书）

二、配置 Vite

首先安装fs 和path依赖

pnpm i fs path

修改 vite.config.js：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from "fs";
import { readdirSync } from 'fs'
import path from "path";
//自动识别最新的证书密钥
const keyFile = readdirSync(__dirname).find(f => f.endsWith('-key.crt'))
const certFile = keyFile.replace('-key.crt', '.crt')
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        host: "0.0.0.0",
        port: 5173, 
        https: {
            key: fs.readFileSync(path.resolve(__dirname, keyFile)),
            cert: fs.readFileSync(path.resolve(__dirname, certFile))
        },
        proxy: {
            "/api": {
                target: "http://192.168.1.110:5000",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ""),
            }
        },
    }
})

三、安装证书

一、以管理员权限打开证书管理器
1.按 Win + R，输入 certlm.msc（本地计算机证书管理）
2.找到证书下面的“受信任的根证书颁发机构”
3.右键→ 所有任务 → 导入
4.点击浏览 → 设置文件类型为所有文件 (.)
5.确保存储位置显示为受信任的根证书颁发机构
6.下一步 → 完成 → 显示成功导入提示即安装完成