本地项目如何设置https(2)——2025-05-19

在配置本地HTTPS时,安装mkcert工具本身是全局操作 (安装在系统环境,与项目无关),但生成证书时需要进入项目目录操作。以下是具体说明:

安装 mkcert(全局操作)

  • 安装位置 :无需进入项目目录,直接在系统的任意路径下运行安装命令,工具会被安装到系统全局环境(如 /usr/local/bin)。

  • 示例

bash 复制代码
# Mac/Linux(任意目录执行)
brew install mkcert

# Windows(管理员权限的PowerShell)
choco install mkcert

生成证书(项目目录操作)

  • 操作位置 :需要进入你的 Vue项目根目录cd your-project),因为生成的证书文件需要放在项目内,方便后续配置。

  • 操作步骤

bash 复制代码
# 进入项目根目录
cd your-vue-project

# 生成证书(证书文件会直接生成在当前目录)
mkcert localhost 127.0.0.1 ::1 192.168.x.x(你的局域网IP)

执行后会生成两个文件:

✅ `localhost.pem`(证书)

✅ `localhost-key.pem`(私钥)

证书文件的作用

生成的证书文件需要被Vue项目的 vue.config.js 引用,因此必须放在 项目根目录 或指定路径下:

javascript 复制代码
// vue.config.js
module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('localhost-key.pem'), // 默认从项目根目录读取
      cert: fs.readFileSync('localhost.pem')
    }
  }
}
相关推荐
兴达易控32 分钟前
信捷V5 - F5变频器接入到Profibus网络的关键
网络协议
Yolanda_20222 小时前
语音相关-浏览器的自动播放策略研究和websocket研究
websocket·网络协议·microsoft
小毛驴8505 小时前
httpclient实现http连接池
网络·网络协议·http
2501_916013745 小时前
iOS应用启动时间优化:通过多工具协作提升iOS App性能表现
websocket·网络协议·tcp/ip·http·网络安全·https·udp
23级二本计科6 小时前
RPC常见问题回答
网络协议·面试·rpc
2501_916008896 小时前
iOS APP上架App Store实践:通过自动化流程和辅助工具高效提
websocket·网络协议·tcp/ip·http·网络安全·https·udp
ZC1111K9 小时前
java springboot 模拟https请求
网络协议·http·https
CaracalTiger13 小时前
HTTP 协议的基本概念(请求/响应流程、状态码、Header、方法)问题解决方案大全
开发语言·网络·python·深度学习·网络协议·http·pip
若疆赤云online15 小时前
Minio使用https自签证书
java·网络协议·https
2501_9160074715 小时前
Fiddler抓包工具实战指南:结合Charles、Postman优化Web与移动调试流程
websocket·网络协议·tcp/ip·http·网络安全·https·udp