vite项目配置本地开发使用https访问,3分钟搞定

在开发过程中,有时候需要用到一些音视频接口等需要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...

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

相关推荐
用户9044381632460几秒前
《零代码基础也能 AI 创作?GPT+DALL・E 实战教程,10 分钟上手》
前端·github
WillaWang1 分钟前
aria | "Accessible Rich Internet Applications"
前端
reoreo3 分钟前
如何使用 i18next 实现多种语言的国际化(从新建 vite ts 项目开始)
前端·javascript
云动雨颤4 分钟前
Typecho 博客统计脚本怎么装?同步 / 异步 + Head/Body 选择指南
前端·html
用户4099322502126 分钟前
快速入门Vue3的v-指令:数据和DOM的“翻译官”到底有多少本事?
前端·ai编程·trae
Asort6 分钟前
JavaScript设计模式(二十三)——访问者模式:优雅地扩展对象结构
前端·javascript·设计模式
星辰h15 分钟前
基于JWT的RESTful登录系统实现
前端·spring boot·后端·mysql·restful·jwt
要加油哦~17 分钟前
前端笔试题 | 整理&总结 ing | 跨域 + fetch + credentials(携带cookie)
前端
旺财是只喵20 分钟前
vue项目里使用3D模型
前端·vue.js
golang学习记23 分钟前
从0死磕全栈之使用 Next.js 构建高性能单页应用(SPA)
前端