前端自己也能开启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端:

移动端:

相关推荐
程序视点2 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian2 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0012 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴3 小时前
Smoothstep
前端·webgl
若梦plus3 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员3 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉3 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus3 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus3 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)3 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生