Vue項(xiàng)目本地開發(fā)集成引入https實(shí)現(xiàn)方式
更新時(shí)間：2026年03月26日 09:50:27 作者：咸蛋超人l
這篇文章主要介紹了Vue項(xiàng)目本地開發(fā)集成引入https方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題描述
本地項(xiàng)目開發(fā)中用到的接口是https ，本地http會(huì)請求不到數(shù)據(jù)
案例使用采用的vue-cli開發(fā)，所以需要針對這兩種方式啟動(dòng)https
問題處理
1.首先是需要配置一個(gè)證書,使用mkcert 進(jìn)行配置證書
2.在vue-cli 中進(jìn)行修改package.json、vue.config.js 中進(jìn)行啟用并驗(yàn)證
npm 安裝
npm i mkcert -g
生成ca證書
1.首先進(jìn)入項(xiàng)目主文件夾 2.執(zhí)行cmd命令 mkdir keys # 新建文件夾存儲(chǔ)證書相關(guān) 3.cd keys 4.mkcert create-ca [options] # options 參考npm 文檔，可以直接使用默認(rèn)值 根據(jù)ca證書生成cert證書 # mkcert create-cert [options] # options 參考npm 文檔 # 如下設(shè)置domains 5.mkcert create-cert --domains 127.0.0.1,localhost
注意：
需要將keys目錄移動(dòng)項(xiàng)目的根目錄。
安裝證書
進(jìn)入keys文件夾雙擊ca.crt，在彈出的對話框中點(diǎn)擊“安裝證書”
vue-cli 中進(jìn)行配置
修改vue.config.js
const https = require('https');
const fs = require('fs');
module.exports = {
devServer: {
host: '127.0.0.1',
https: {
cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt'))，
key: fs.readFileSync(path.join(__dirname, 'keys/cert.key'))
}
}
}
vite 中進(jìn)行配置
修改vite.package.json
import path from 'path'
import * as fs from 'fs'
export default defineConfig({
server: {
https: {
cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt'))，
key: fs.readFileSync(path.join(__dirname, 'keys/cert.key'))
},
port: 8089
}
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽
本文主要介紹了vue項(xiàng)目用后端返回的文件流實(shí)現(xiàn)docx和pdf文件預(yù)覽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽，VUe使用js實(shí)現(xiàn)拖拽穿梭框，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue+elementui(對話框中form表單的reset問題)
這篇文章主要介紹了vue+elementui(對話框中form表單的reset問題)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時(shí),可能會(huì)遇到數(shù)據(jù)聯(lián)動(dòng)的現(xiàn)象,即修改一個(gè)表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會(huì)跟著變化,這種現(xiàn)象通常是因?yàn)樗斜砀竦臄?shù)據(jù)引用了同一個(gè)對象或數(shù)組導(dǎo)致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象,感興趣的朋友一起看看吧2024-11-11
這篇文章主要介紹了關(guān)于.prettierrc代碼格式化配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue Tooltip提示動(dòng)態(tài)換行問題
這篇文章主要介紹了vue Tooltip提示動(dòng)態(tài)換行問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼
面包屑導(dǎo)航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁到當(dāng)前頁面的鏈接序列,有助于用戶快速了解和導(dǎo)航至上級頁面,本文就來介紹一下Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07