网络协议 vite项目配置本地开发使用https访问，3分钟搞定

在开发过程中，有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档：开发服务器选项 | Vite 官方中文文档

第一种：使用插件@vitejs/plugin-basic-ssl

这个插件仓库地址：https://github.com/vitejs/vite-plugin-basic-ssl

安装依赖@vitejs/plugin-basic-ssl：

pnpm i @vitejs/plugin-basic-ssl

然后配置到vite中：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'

import basicSsl from '@vitejs/plugin-basic-ssl'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [vue(), basicSsl()],

server: {

host: '0.0.0.0',

https: true

},

resolve: {

alias: {

'@': path.resolve(__dirname, 'src')

}

}

})

最后重启服务器：

但是这种方式会让浏览器提示不安全： 

第二种：使用插件vite-plugin-mkcert

安装vite-plugin-mkcert插件，然后配置到项目中：

pnpm add vite-plugin-mkcert -D

然后配置到vite.config.ts中：

//2.在vite.config.js里面引入

import mkcert from "vite-plugin-mkcert";

export default defineConfig({

server: {

https: true // 需要开启https服务

},

plugins: [mkcert()]

})

第三种：使用mkcert（强烈推荐）

使用教程可以看我的文章：https://xiaoshen.blog.csdn.net/article/details/135893188 

因为这种浏览器不会报错误提示：

推荐链接

 您阅读本篇文章共花了：