Vite开发环境配置HTTPS指南

目录

1. 使用自定义证书
2. 完整配置示例
3. 证书生成方案
4. 常见问题与解决方案

使用自定义证书

在本地开发服务器使用https需要使用自定义证书，可以这样配置：

js

复制

// vite.config.js
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync('./cert/key.pem'),
      cert: fs.readFileSync('./cert/cert.pem')
    }
  }
}

完整配置示例

js

复制

import fs from 'fs'
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./cert/key.pem'),
      cert: fs.readFileSync('./cert/cert.pem'),
      strictPort: true,
      port: 3000,
      open: true
    },
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        secure: false // https接口需要配置
      }
    }
  }
})

证书生成方案

1. 使用 mkcert（推荐）

bash

复制

# MacOS安装
brew install mkcert

# Windows安装
choco install mkcert

# 生成证书
mkcert localhost

2. 使用 OpenSSL

bash

复制

# 生成私钥
openssl genrsa -out key.pem 2048

# 生成证书
openssl req -new -x509 -key key.pem -out cert.pem -days 365 -subj "/CN=localhost"

3. 使用Vite自动生成

js

复制

export default defineConfig({
  server: {
    https: true
  }
})

常见问题与解决方案

1. mkcert安装失败

如果遇到Chocolatey锁定文件错误，可以：

powershell

复制

# 以管理员身份运行PowerShell
Remove-Item 'C:\ProgramData\chocolatey\lib\960379d0c075d4e5840fa9c2c120a75d9b2885b5' -Force
choco install mkcert

或直接从GitHub下载可执行文件：

1. 访问 github.com/FiloSottile…
2. 下载Windows版本
3. 重命名为mkcert.exe并放入系统PATH

2. 证书信任问题

• 开发环境中可以在浏览器中接受自签名证书的风险
• 使用mkcert生成的证书会自动被系统信任
• 生产环境应使用正式的SSL证书

3. 代理配置

当使用HTTPS开发服务器配合代理时：

js

复制

server: {
  proxy: {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
      secure: false  // 重要：如果是自签名证书需要设置
    }
  }
}

最佳实践建议

1. 开发环境推荐使用Vite的自动HTTPS配置（https: true）
2. 需要自定义证书时优先使用mkcert
3. 确保代理配置正确，特别是secure选项
4. 记住这只是开发环境配置，生产环境需要使用正式的SSL证书

注意事项

• 自签名证书会触发浏览器警告，这是正常的
• 开发时的HTTPS配置不应用于生产环境
• 使用代理时注意配置secure选项
• 某些API可能强制要求HTTPS
• 配置HTTPS可能会略微影响开发服务器的启动时间