【VUE】项目本地开启https访问模式(vite4)

在实际开发中,有时候需要项目以https形式进行页面访问/调试,下面介绍下非vue-cli创建的vue项目如何开启https

环境

  • vue: ^3.2.47
  • vite: ^4.1.4

根据官方文档:开发服务器选项 | Vite 官方中文文档
在这里插入图片描述
ps:首次操作,不要被类型boolean误导了哈,直接设置true可能报错

正确打开方式

1、首先根据官方文档安装依赖@vitejs/plugin-basic-ssl

npm install -D @vitejs/plugin-basic-ssl
# or
# yarn add -D @vitejs/plugin-basic-ssl
# or
# pnpm add -D @vitejs/plugin-basic-ssl

2、在vite.config.js或者vite.config.ts中配置:

import { defineConfig } from "vite";
import basicSsl from '@vitejs/plugin-basic-ssl'
// ...export default defineConfig(()=>{server: {// ...proxy: {// ...},https: true, // 安装basicSsl后,这里可设置可不设置},plugins: [// ...basicSsl(),]
});

3、重启服务

npm run dev
# or
# yarn dev
# or
# pnpm run dev

不出意外的话https就开启了
在这里插入图片描述

注意

由于我们只是临时开发使用,所以证书信息并非正式的,首次浏览器打开会出现如下提示,点击允许就可以了;
以下是火狐的示例:
火狐浏览器非安全证书提示
证书信息:
@vitejs/plugin-basic-ssl 证书信息

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31882.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pyspark

2、DataFrame 2.1 介绍 在Spark语义中,DataFrame是一个分布式的行集合,可以想象为一个关系型数据库的表,或者一个带有列名的Excel表格。它和RDD一样,有这样一些特点: Immuatable:一旦RDD、DataFrame被创…

ssm+vue基于java的少儿编程网上报名系统源码和论文PPT

ssmvue基于java的少儿编程网上报名系统源码和论文PPT006 开发工具:idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具:navcat,小海豚等 开发技术:java ssm tomcat8.5 摘 要 在国家重视教育影响下,教育部门的密确配合下&#…

沐渥六门氮气柜技术参数详解

氮气柜是用来存储电子元器件、芯片、半导体器件、金属材料、电路板、精密仪器等物品的设备,通过充入氮气降低柜内湿度,达到防潮、防氧化、防静电、防锈和防霉效果。 六门氮气柜参数 1、容积:约1380L;外尺寸:W1200*D700…

一零六八、回顾MySQL关键字排序

一、 关键字书写顺序 select distinct from join on where group by having union (all) order by limit二、 关键字实际执行顺序 from on join where group by having select distinct union (all) order by limit个人理解&…

100G光模块的应用案例分析:电信、云计算和大数据领域

100G光模块是一种高速光模块,由于其高速率和低延迟的特性,在电信、云计算和大数据领域得到了广泛的应用。在本文中,我们将深入探讨100G光模块在这三个领域的应用案例。 一、电信领域 在电信领域,100G光模块被广泛用于构建高速通…

QT- QLineEdite设置自动补全功能,并修改自动补全的样式

#include <QApplication> #include <QLineEdit> #include <QCompleter> #include <QStringListModel> #include <QMainWindow>int main(int argc, char *argv[]) {QApplication app(argc, argv);// 创建一个字符串列表模型QStringListModel mode…

python流程控制语句学习笔记

if语句的使用 一、if判断语句介绍 if语句是用来进行判断的&#xff0c;其使用格式如下&#xff1a; if 要判断的条件: 条件成立时&#xff0c;要做的事情 demo1: age 30 print("------if判断开始------") if age > 18: print("我已经成年了") print…

HTML 元素中的name 属性

name 属性是 HTML 元素中常用的属性之一。它用于指定表单元素的名称&#xff0c;以便在提交表单时将其值与对应的键关联起来。 每个表单元素&#xff08;例如 <input>、<select> 和 <textarea>&#xff09;都可以具有一个 name 属性&#xff0c;该属性为元素…

Nginx使用proxy_cache指令设置反向代理缓存静态资源

场景 CentOS7中解压tar包的方式安装Nginx&#xff1a; CentOS7中解压tar包的方式安装Nginx_centos7 tar文件 怎么load_霸道流氓气质的博客-CSDN博客 参考上面流程实现搭建Nginx的基础上&#xff0c;实现静态资源的缓存设置。 注意上面安装时的目录是在/opt/nginx目录下&…

ELK中grok插件、mutate插件、multiline插件、date插件的相关配置

目录 一、grok 正则捕获插件 自定义表达式调用 二、mutate 数据修改插件 示例&#xff1a; ●将字段old_field重命名为new_field ●添加字段 ●将字段删除 ●将filedName1字段数据类型转换成string类型&#xff0c;filedName2字段数据类型转换成float类型 ●将filedNam…

如何使用Flask-CORS实现跨域资源共享

如何使用Flask-CORS实现跨域资源共享 引言&#xff1a; 在网络应用开发中&#xff0c;跨域资源共享&#xff08;Cross Origin Resource Sharing&#xff0c;简称CORS&#xff09;是一种机制&#xff0c;允许服务器与指定的来源或域名之间共享资源。使用CORS&#xff0c;我们可…

Leetcode每日一题:1289. 下降路径最小和 II(2023.8.10 C++)

目录 1289. 下降路径最小和 II 题目描述&#xff1a; 实现代码与解析&#xff1a; 动态规划 原理思路&#xff1a; 1289. 下降路径最小和 II 题目描述&#xff1a; 给你一个 n x n 整数矩阵 grid &#xff0c;请你返回 非零偏移下降路径 数字和的最小值。 非零偏移下降路…

数据结构-1

1.2 线性结构树状结构网状结构&#xff08;表 数 图&#xff09; 数据&#xff1a;数值型 非数值型 1.2.3数据类型和抽象数据类型 1.3抽象数据类型 概念小结&#xff1a; 线性表: 如果在独立函数实现的 .c 文件中需要包含 stdlib.h 头文件&#xff0c;而主函数也需要包含 st…

短视频账号矩阵系统/技术开发搭建私有部署

本系统是基于短视频领域的新一代系统&#xff0c;旨在提供一个高效、全面的短视频管理与分发平台。系统采用先进的开发算法和技术&#xff0c;实现了智能化视频分类、推荐和用户互动功能。 目录 一、抖音SEO账号矩阵系统的开发和部署遵循以下原则&#xff1a; 二、账号矩阵绑…

谷歌全栈多平台应用开发神器Project IDX来了!PaLM 2加持,代码效率翻倍

一直以来&#xff0c;从0开始构建应用&#xff0c;都是一项复杂的工作。尤其是跨越手机、Web和桌面平台的程序。 这是一片无尽的复杂海洋&#xff0c;需要把技术堆栈融合在一起&#xff0c;来引导、编译、测试、部署、监控应用程序。 多年来&#xff0c;谷歌一直致力于让多平…

【剑指 の 精选】热门状态机 DP 运用题

题目描述 这是 LeetCode 上的 「剑指 Offer II 091. 粉刷房子」 &#xff0c;难度为 「中等」。 Tag : 「状态机 DP」、「动态规划」 假如有一排房子&#xff0c;共 n 个&#xff0c;每个房子可以被粉刷成红色、蓝色或者绿色这三种颜色中的一种&#xff0c;你需要粉刷所有的房子…

EFLFK——ELK日志分析系统+kafka+filebeat架构

环境准备 node1节点192.168.40.16elasticsearch2c/4Gnode2节点192.168.40.17elasticsearch2c/4GApache节点192.168.40.170logstash/Apache/kibana2c/4Gfilebeat节点192.168.40.20filebeat2c/4G https://blog.csdn.net/m0_57554344/article/details/132059066?spm1001.2014.30…

基于LoRa和WiFi通信技术的智能感应主要内容是什么?

基于LoRa和WiFi通信技术的智能感应主要内容是实现智能设备与云端之间的信息交互。LoRa是一种低功耗、远距离的无线通信技术&#xff0c;适用于物联网应用。而WiFi是一种常见的无线通信技术&#xff0c;通常用于连接智能设备到互联网。 在这个领域&#xff0c;智能感应的实现主…

HTTP代理授权方式介绍

在网络爬虫过程中&#xff0c;我们经常需要使用HTTP代理来实现IP隐藏、突破限制或提高抓取效率。而为了确保代理的正常使用&#xff0c;并避免被滥用&#xff0c;代理服务商通常会采用授权方式。在本文中&#xff0c;我们将介绍几种常见的HTTP代理授权方式&#xff0c;以帮助你…