前端开发环境模拟HTTPS

文章目录

一、创建HTTPS证书

进入要建立 HTTPS 服务的目录

shell 复制代码
openssl genrsa -out key.pem 1024
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -in csr.pem -signkey key.pem -out cert.pem

openssl报错?

Windows11 安装openssl

shell 复制代码
winget search openssl
winget install OpenSSL

配置环境变量

shell 复制代码
# 变量名
OPENSSL_HOME
# 变量值
C:\Program Files\OpenSSL-Win64\bin

# PATH
%OPENSSL_HOME%

二、创建HTTPS服务器

shell 复制代码
http-server -S ./

三、脚手架配置HTTPS

@umi配置

typescript 复制代码
import {defineConfig} from "umi";

export default defineConfig({
	https: {
		cert: './key/cert.pem',
		key: './key/key.pem',
		http2: true
	},
	define: {
		IS_DEV: true
	}
})

@vite配置

typescript 复制代码
import * as fs from "fs";
import * as path from "path";
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: {
        cert: fs.readFileSync(path.join(__dirname, 'key/cert.pem')),
        key: fs.readFileSync(path.join(__dirname, 'key/key.pem')),
    }
   },
  plugins: [react()],
})
相关推荐
熊的猫43 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
‍。。。3 小时前
使用Rust实现http/https正向代理
http·https·rust
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel