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

移动端：