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...

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

相关推荐
江拥羡橙4 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
楼田莉子5 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝5 小时前
Vue总结
前端·javascript·vue.js
木易 士心6 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER6 小时前
Web 开发 21
前端·学习
又是忙碌的一天6 小时前
前端学习day01
前端·学习·html
Joker Zxc6 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel6 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld6 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端
不会算法的小灰7 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html