【前端】使用HTTPS

七灵微

已于 2025-05-28 23:52:28 修改

阅读量856

点赞数 20

分类专栏：前端🌟 文章标签：前端 https 网络协议

于 2025-05-26 18:18:31 首次发布

本文链接：https://blog.csdn.net/qq_41775119/article/details/148236476

版权

前端🌟 专栏收录该内容

54 篇文章

订阅专栏

在前端本地开发环境中使用 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.0
    port: 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）导入

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

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