在開發(fā)過程中，有時(shí)候需要用到一些音視頻接口等需要https才能拿到權(quán)限，為方便開發(fā)過程中調(diào)試，這里就介紹幾種vite項(xiàng)目快速開啟https訪問的方式。vite配置項(xiàng)說明文檔：開發(fā)服務(wù)器選項(xiàng) | Vite 官方中文文檔
第一種：使用插件@vitejs/plugin-basic-ssl
這個(gè)插件倉庫地址：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')
}
}
})
最后重啟服務(wù)器：
但是這種方式會(huì)讓瀏覽器提示不安全：?
第一種：使用插件vite-plugin-mkcert
安裝vite-plugin-mkcert插件，然后配置到項(xiàng)目中：
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服務(wù)
},
plugins: [mkcert()]
})?文章來源地址http://www.zghlxwxcb.cn/news/detail-835068.html
第三種：使用mkcert（強(qiáng)烈推薦）
使用教程可以看我的文章：https://xiaoshen.blog.csdn.net/article/details/135893188?
因?yàn)檫@種瀏覽器不會(huì)報(bào)錯(cuò)誤提示：
?文章來源：http://www.zghlxwxcb.cn/news/detail-835068.html
?
到了這里，關(guān)于vite項(xiàng)目配置本地開發(fā)使用https訪問，3分鐘搞定的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
