Vite本地localhost配置https后Chrome提示证书无效如何解决？

问题根因 #

你遇到的证书无效问题有两个核心原因：

1. Vite配置层级错误，https参数需放在server配置项下而非根配置
2. 自签名证书未添加Chrome强制要求的SAN（Subject Alternative Name）扩展，且未导入系统受信任根证书存储

正确解决步骤 #

1. 修正vite.config.js配置 #

import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs';

export default defineConfig({
  resolve: { alias: { '@': '/src' } },
  plugins: [vue()],
  // https配置要放在server字段下
  server: {
    https: {
      key: fs.readFileSync('RootCA-key.pem'),
      cert: fs.readFileSync('RootCA.pem')
    }
  }
})

配置修正后不需要再加-- --https参数启动，直接运行npm run dev即可。

2. 生成符合Chrome要求的带SAN扩展的自签名证书 #

执行如下openssl命令生成证书，替换命令中的localhost为你实际本地访问用的域名：

openssl req -x509 -out RootCA.pem -keyout RootCA-key.pem \
  -days 365 -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

3. 导入根证书到系统受信任存储 #

• Windows系统：双击生成的RootCA.pem文件，选择「安装证书」，存储位置选择「本地计算机」，下一步后选择「将所有证书都放入下列存储」，浏览选择「受信任的根证书颁发机构」，完成安装后重启系统
• Mac系统：双击RootCA.pem打开钥匙串访问，找到导入的证书，右键选择「显示简介」，展开「信任」选项卡，将「使用此证书时」改为「始终信任」，保存设置后重启Chrome

4. 验证生效 #

重启Chrome后访问本地https地址，不会再提示证书无效。

内容的提问来源于stack exchange，提问作者hyphen