前端自己也能开启HTTPS

目录

前言

使用mkcert

安装

创建证书

[利用 mkcert 创建 ca](#利用 mkcert 创建 ca)

[根据 ca 创建 cert](#根据 ca 创建 cert)

安装证书

项目开启HTTPS

安装插件

[配置 vitecofnig.js](#配置 vitecofnig.js)

最终效果


前言

今天我发现了一个宝藏,兄弟们!就是前端开发阶段是可以使用https来开发的。对不懂前端的后端兄弟来说,这不就是个通讯协议吗?有什么可骄傲的。

咳咳,那自己咱村里人才知道,HTTPS能给前端带来多少便利。例如,在开发阶段前端项目需要跨设备获取一定的权限,这个时候浏览器要求某些能力需要是https的情况下才能使用,比如获取摄像头画面,获取当前地理位置等。如果有些前端兄弟还不知道如何开始https进行开发,那开发体验一定不好吧。

我就废话少说了,下面给大家演示如何开启https,这里以vite 构建的项目为例。

使用mkcert

mkcert是一个能创建不带 OpenSSL 的自签名 tls 证书的插件,使用的时候需要全局安装。

安装

bash 复制代码
npm i mkcert -g

创建证书

需要在项目工程文件中创建一个文件夹 mkcert。

然后进入该文件夹再开启终端,输入以下指令:

利用 mkcert 创建 ca
bash 复制代码
mkcert create-ca
根据 ca 创建 cert

domains 后面跟着的是域名或者ip

bash 复制代码
mkcert create-cert --domains 127.0.0.1,localhost

然后就能得到证书啦~

安装证书

双击 ca.crt进入安装界面。

安装完了ca.crt ,那么cert.crt的安装方法也是一样的。

项目开启HTTPS

证书安装完成之后,那么下一步咱们要做的就是把项目开启https。

安装插件

bash 复制代码
yarn add @vitejs/plugin-basic-ssl -D

配置 vitecofnig.js

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pluginBasicSsl from "@vitejs/plugin-basic-ssl"

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    pluginBasicSsl()
  ],
  server: {
    https: true,
    host: '0.0.0.0',
  }
})

到这里,就配置完成就能成功开启https啦~

最终效果

最终打开效果如下:

pc端:

移动端:

相关推荐
游戏开发爱好者83 小时前
iOS重构期调试实战:架构升级中的性能与数据保障策略
websocket·网络协议·tcp/ip·http·网络安全·https·udp
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html