【前端】使用HTTPS

在前端本地开发环境中使用 HTTPS 主要取决于你用的是哪个构建工具（如 Vite、Webpack、Vue CLI 等）。

Vite

npm install --save-dev @types/node #安装 Node 类型定义
#@types/node 提供了 Node.js 内置模块的完整类型定义，TypeScript 编译器才能正确识别它们。npm install mkcert --save-dev#生成HTTPS本地证书 执行一次即可
npx mkcert create-ca
npx mkcert create-cert
#在项目中生成 cert.pem 和 key.pem 文件。
#证书一旦生成，无法修改，只能重新生成证书
npx mkcert create-cert --ca-key rootCA-key.key --ca-cert rootCA.crt localhost 127.0.0.1 mydomain.com
#--ca-key 指定上一步生成的 CA 私钥文件
#--ca-cert 指定 CA 证书文件
#后面的参数就是你想包含进证书的域名或 IP，可以多个

//打开 tsconfig.node.json，检查是否有 "types": ["node"]，如果没有，添加进去。
{"compilerOptions": {"module": "ESNext","target": "ESNext","moduleResolution": "Node","types": ["node"]//内置node模块 这里⬇️}
}//修改 vite.config.ts 或 vite.config.js
import { defineConfig } from 'vite'import fs from 'fs'
import path from 'path'//这里⬇️import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {https: {//这里⬇️key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt')),},host: 'localhost', // 或 0.0.0.0port: 5173,},
})

yarn dev  # 或 npm run dev

浏览器访问 https://localhost:5173，你需要信任证书（第一次访问会提示“不安全”，点击继续即可）。

文件名	含义
cert.crt	服务端的证书（公钥）
ca.crt	根证书（自签名时的 CA 证书）
cert.key	私钥（用来与 cert.crt 搭配）

# cert.key
-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----#cert.crt
-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----

• ca.crt是可选的，除非你想让浏览器信任你自签的证书链。
  把你的 ca.crt 安装进系统或浏览器的信任根证书列表

macOS:用钥匙串访问（Keychain Access）导入

1. 打开「钥匙串访问」App
2. 拖入你的 ca.crt
3. 设置「始终信任」

Windows:
4. 运行 certmgr.msc
5. 选择「受信任的根证书颁发机构」→「证书」
6. 右键选择「导入」→ 选择你的 ca.crt
7. 安装完成后，重新启动浏览器

不再显示不信任的警告 🚫🔒

Webpack

//在 webpack-dev-server 中启用 HTTPS：
// webpack.config.js
devServer: {https: true,host: 'localhost',port: 3000,
}//配置自定义证书
https: {key: fs.readFileSync('./key.pem'),cert: fs.readFileSync('./cert.pem'),
},

本地生产环境 npx serve

serve 本身是支持 HTTPS 的，只需要加参数

npx serve -s dist --ssl-cert cert.pem --ssl-key key.pem

• 两个工具之间的关系
  从功能角度来说，如果你用的是 Vite，用 vite preview 就完全可以替代 npx serve dist 来预览构建后的静态文件，而且 vite preview 是 Vite 官方集成的命令，兼容性和配置体验更好。推荐用 vite preview 来预览生产构建，特别是如果你要用 HTTPS，vite preview 支持直接配置更方便。
  如果vite preview找不到，使用npx vite preview

工具	作用	需不需要卸载？
Vite	开发和构建工具，yarn dev 启动开发服务器，yarn build 生成静态文件	不能卸载，是你项目核心构建工具
npx serve	一个简单的静态文件服务器，用来本地预览构建后生成的 dist 目录	不用卸载，方便快速预览，但不是必须

npm uninstall -g serve卸载，可选清理缓存npm cache clean --force，这样npx serve dist 命令不再起作用

浏览器提示“不安全”解决方法

由于是自签证书，浏览器默认会提示不安全；
点击「高级」→「继续访问」即可；
若你希望不再提示，需要手动将 .pem 证书导入系统信任证书中。

上传github注意不要把key传上去

把证书文件（比如 .pem、.key、.crt）加入 .gitignore，避免误上传。
使用环境变量或安全的配置管理方式来管理证书路径。
如果一定要存储证书，建议放在私有仓库或使用加密方式。
生产环境使用云服务或服务器的证书管理（如 Let’s Encrypt）来自动管理证书。

# 忽略证书和私钥
*.pem
*.key
*.crt