vite项目配置本地开发使用https访问，3分钟搞定-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite项目配置本地开发使用https访问，3分钟搞定。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vite5 ssl,HTML前端,https,网络协议,http

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

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

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

vite5 ssl,HTML前端,https,网络协议,http 安装依赖@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')
    }
  }
})

最后重启服务器：

vite5 ssl,HTML前端,https,网络协议,http

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

vite5 ssl,HTML前端,https,网络协议,http

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

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

pnpm add vite-plugin-mkcert -D

vite5 ssl,HTML前端,https,网络协议,http

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

//2.在vite.config.js里面引入
import mkcert from "vite-plugin-mkcert";
 
export default defineConfig({
  server: {
    https: true   // 需要开启https服务
   },
  plugins: [mkcert()]
})

文章来源地址https://www.toymoban.com/news/detail-835068.html