windows安装SSL证书--前端本地项目以https协议访问

1. SSL安装包下载：https://slproweb.com/products/Win32OpenSSL.html；安装过程中会出现一个选项："Copy OpenSSL DLLs to"，建议选择 "The Windows system directory"，这样可以自动配置环境变量。验证安装：openssl version

2. 生成秘钥和证书签名

　　# 生成私钥

　　openssl genrsa -out key.pem 2048

　　# 生成证书签名请求

　　openssl req -new -key key.pem -out cert.csr

　　# 生成自签名证书

　　openssl x509 -req -days 365 -in cert.csr -signkey key.pem -out cert.pem

3. 项目配置

以vue3+vite为例

module.exports = {
  devServer: {

 　　　　// 配置证书

    　　https: {

      　　　　// 注意这里需要将证书配置放在https对象内

      　　　　cert: fs.readFileSync(path.resolve(__dirname, './cert.pem')), // 使用path.resolve确保路径正确

      　　　　key: fs.readFileSync(path.resolve(__dirname, './key.pem')),

    　　},

    　　// 可选配置

    　　port: 443, // HTTPS 默认端口

     open: true  // 自动打开浏览器
  }
}