【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

powershell 复制代码
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中配置:

javascript 复制代码
import { defineConfig } from "vite";
import basicSsl from '@vitejs/plugin-basic-ssl'
// ...

export default defineConfig(()=>{
	server: {
	    // ...
	    proxy: {
	    	// ...
	    },
	    https: true, // 安装basicSsl后,这里可设置可不设置
   },
   plugins: [
   		// ...
   		basicSsl(),
   ]
});

3、重启服务

powershell 复制代码
npm run dev
# or
# yarn dev
# or
# pnpm run dev

不出意外的话https就开启了

注意

由于我们只是临时开发使用,所以证书信息并非正式的,首次浏览器打开会出现如下提示,点击允许就可以了;

以下是火狐的示例:

证书信息:

相关推荐
JamSlade20 分钟前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保22 分钟前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo121529 分钟前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux42 分钟前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied1 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果1 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Sheldon一蓑烟雨任平生2 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
Luffe船长2 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y2 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后2 小时前
使用 Service Worker 限制请求并发数
前端·service worker