在配置本地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')
    }
  }
}