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

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

安装 mkcert（全局操作）

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

• 示例：

# Mac/Linux（任意目录执行）
brew install mkcert

# Windows（管理员权限的PowerShell）
choco install mkcert

生成证书（项目目录操作）

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

• 操作步骤：

# 进入项目根目录
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 引用，因此必须放在 项目根目录 或指定路径下：

// vue.config.js
module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('localhost-key.pem'), // 默认从项目根目录读取
      cert: fs.readFileSync('localhost.pem')
    }
  }
}