在开发过程中,有时候需要用到一些音视频接口等需要https才能拿到权限,为方便开发过程中调试,这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档:开发服务器选项 | Vite 官方中文文档
第一种:使用插件@vitejs/plugin-basic-ssl
这个插件仓库地址:github.com/vitejs/vite...
安装依赖@vitejs/plugin-basic-ssl:
javascript
pnpm i @vitejs/plugin-basic-ssl
然后配置到vite中:
javascript
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插件,然后配置到项目中:
bash
pnpm add vite-plugin-mkcert -D
然后配置到vite.config.ts中:
javascript
//2.在vite.config.js里面引入import mkcert from "vite-plugin-mkcert"; export default defineConfig({ server: { https: true // 需要开启https服务 }, plugins: [mkcert()]})
第三种:使用mkcert(强烈推荐)
使用教程可以看我的文章:xiaoshen.blog.csdn.net/article/det...
因为这种浏览器不会报错误提示: