前端小白学习之路-Vben探索 vite 配置 - 1/50

目的

  1. 为ApiHug 寻找一个前端解决方案
  2. 前端背景知识缺乏
  3. 整盘操作：前后全栈
  4. 80% 中小规模项目提效 30% +
  5. 全员全栈
  6. 快速构建
  7. 高度模块化
  8. AI Native
  9. ...

所以

  1. 裸学前端
  2. 高举高打，直接从复杂项目拆解
  3. AI 助手高度依赖
  4. 后端癖严重，高度模块， 结构化，架构
  5. 边学变搞此系列文章纯粹笔记目的两个： 记录过程 + 督促勿半途而弃

筹备

  1. js 基本知识：熟练
  2. css: 知晓
  3. vue: 知晓

首先前端解决方案现在其实非常成熟， 但是即便如此，还是给他们分门别类， 不同分类解决方案有差别， 从最容易得入手：

先从后端 admin 管理框架入手， 参考了很多家方案， 有 jhipster ，有各种 ***-admin, 部分 star 很多但是有点偏老， 部分太庞大耦合太高，无从下手， 选了个架构比较新， 还灭有长到那么复杂的框架做为分析对象：

Vben AdminVben Admin & 企业级管理系统框架icon-default.png?t=O83Ahttps://doc.vben.pro/分10期还是50期不知道， 变走边看把， 先：

  1. 跑通他们的 demo 
  2. 然后根据文档拆
  3. 分析代码可以 cursor  + gpt (apismart)

下面文章，大部分是我使用 apismart 对接 gpt-4o 解释的结果！

ApiSmart Api design Copilot - ApiHugApiSmart make your api design and implement happiericon-default.png?t=O83Ahttps://apihug.com/zhCN-docs/copilot

001 Internal - vite-config

涵盖信息：

  1. vite 配置
  2. vite 插件
  3. 环境变量

谁使用？ 你项目的 vite.config.mts 一般引用到这个包， 方便快速定义啦：

import { defineConfig } from '@vben/vite-config';export default defineConfig(async () => {return {application: {archiver: false},vite: {server: {proxy: {'/api': {changeOrigin: true,rewrite: (path) => path.replace(/^\\/api/, ''),// mock代理目标地址target: '<http://localhost:5320/api>',ws: true,},},},},};
});

配置

内置了两种，一种是 application 一种是 library, 如果有 index.html 默认就是 application 模式， library 这里不分析；

Application

https://github.com/vbenjs/vue-vben-admin/blob/main/internal/vite-config/src/config/application.ts

效果和一般意义上的 vite-config.mjs 一个效果，就是 vite 编译的配置。

概述

这段代码定义了一个函数 defineApplicationConfig，用于配置 Vite 应用程序的构建和开发环境。它通过合并用户配置、环境变量和插件来生成最终的 Vite 配置。

关键组件

  1. 导入：
    • 代码导入了 Vite 的类型和函数，以及一些自定义模块和实用工具。
    • 它还使用了 Node.js 的 path 模块来处理文件路径。
  2. defineApplicationConfig 函数：
    • 这是一个主函数，用于定义应用程序的配置。
    • 它接受一个可选的 userConfigPromise 参数，这是一个返回用户配置的 Promise。
  3. 加载配置和环境：
    • 使用 loadAndConvertEnv 函数加载和转换环境变量。
    • 使用 loadEnv 函数根据当前模式加载环境变量。
  4. 插件加载：
    • 使用 loadApplicationPlugins 函数加载应用程序所需的插件。
    • 插件配置包括压缩、国际化、PWA 支持等。
  5. 应用程序配置：
    • 定义了 Vite 的基本配置，包括构建选项、CSS 选项、ESBuild 配置、插件和服务器配置。
    • 构建选项指定了输出文件的命名规则和目标 ECMAScript 版本。
    • CSS 选项通过 createCssOptions 函数生成，允许注入全局 SCSS 样式。
  6. 合并配置：
    • 使用 mergeConfig 函数合并通用配置和应用程序配置，生成最终的 Vite 配置。
  7. createCssOptions 函数：
    • 生成 CSS 预处理器选项。
    • 如果 injectGlobalScss 为 true，则为 SCSS 文件注入全局样式。

示例用法

假设你有一个用户配置函数 userConfig，你可以这样使用 defineApplicationConfig：

import { defineApplicationConfig } from './application';const userConfig = async (config) => {return {application: {appTitle: 'My App',base: '/',port: 3000,},vite: {// 其他 Vite 配置},};
};export default defineApplicationConfig(userConfig);

总结

defineApplicationConfig 函数是一个用于配置 Vite 应用程序的工具。它通过合并用户配置、环境变量和插件来生成一个完整的 Vite 配置，支持构建和开发环境的各种需求。

Plugins

被 Application 初始化时候加载， 也是根据配置，是否需要加载对应的 plugin

概述

这段代码定义了一组函数，用于根据不同的条件加载 Vite 插件。Vite 是一个用于构建现代 Web 应用程序的工具，这些插件可以扩展 Vite 的功能，比如支持 Vue、国际化、PWA、压缩等。

关键组件

  1. 导入：
    • 代码导入了 Vite 插件的类型和一些具体的插件。
    • 还导入了一些自定义插件模块。
  2. loadConditionPlugins 函数：
    • 接受一个条件插件数组 conditionPlugins。
    • 遍历每个条件插件，如果条件为真，则加载相应的插件。
  3. loadCommonPlugins 函数：
    • 根据通用选项加载常用的 Vite 插件。
    • 包括 Vue 支持、Vue JSX 支持、开发工具、元数据注入和可视化工具。
  4. loadApplicationPlugins 函数：
    • 根据应用程序选项加载特定的 Vite 插件。
    • 支持的功能包括国际化、打印信息、懒加载表格、模拟数据、应用加载注入、许可证、PWA 支持、压缩、HTML 插件、导入映射、额外的应用配置和归档。
  5. loadLibraryPlugins 函数：
    • 根据库选项加载特定的 Vite 插件。
    • 支持的功能包括生成类型声明文件（dts）。
  6. 插件条件：
    • 每个插件都有一个条件，只有在条件为真时才会加载该插件。
    • 例如，isBuild 用于判断当前是否为构建模式，compress 用于判断是否需要压缩。

示例用法

假设你有一个应用程序配置对象 appOptions，你可以这样使用 loadApplicationPlugins：

import { loadApplicationPlugins } from './index';const appOptions = {isBuild: true,env: process.env.NODE_ENV,i18n: true,compress: true,compressTypes: ['gzip'],// 其他选项...
};loadApplicationPlugins(appOptions).then((plugins) => {console.log('Loaded plugins:', plugins);
});

总结

这段代码提供了一种灵活的方式来根据不同的条件加载 Vite 插件。通过这种方式，你可以根据开发或生产环境的不同需求，动态地配置和扩展 Vite 的功能。

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

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

相关文章

Docker：Dockerfile(补充四)

Docker：Dockerfile(补充四)

这里写目录标题 1. Dockerfile常见指令1.1 DockerFile例子 2. 一些其他命令 1. Dockerfile常见指令 简单的dockerFile文件 FROM openjdk:17LABEL authorleifengyangCOPY app.jar /app.jarEXPOSE 8080ENTRYPOINT ["java","-jar","/app.jar"]# 使…
阅读更多...
谷歌浏览器的扩展市场使用指南

谷歌浏览器的扩展市场使用指南

谷歌浏览器的扩展市场为用户提供了丰富多样的功能扩展&#xff0c;可以大幅提升浏览体验。本文将为你详细介绍如何使用谷歌浏览器的扩展市场&#xff0c;包括安装、管理和一些推荐的无障碍工具、图标重置方法和便捷操作技巧。&#xff08;本文由https://chrome.py010.cn/的作者…
阅读更多...
04、Vue与Ajax

04、Vue与Ajax

4.1 发送AJAX异步请求的方式 发送AJAX异步请求的常见方式包括&#xff1a; 4.1.1. 原生方式 使用浏览器内置的JS对象XMLHttpRequest const xhr new XMLHttpRequest() xhr.open() xhr.send() xhr.onreadystatechange function(){} 4.1.2. 原生方式 使用浏览器内置的JS函…
阅读更多...
网络安全概论——防火墙原理与设计

网络安全概论——防火墙原理与设计

一、防火墙概述 防火墙是一种装置&#xff0c;它是由软件/硬件设备组合而成&#xff0c;通常处于企业的内部局域网与 Internet 之间&#xff0c;限制 Internet 用户对内部网络的访问以及管理内部用户访问 Internet 的权限。换言之&#xff0c;一个防火墙在一个被认为是安全和可…
阅读更多...
南城云趣：智能云平台，杜绝电动车充电安全隐患

南城云趣：智能云平台，杜绝电动车充电安全隐患

电动自行车作为绿色低碳出行的主要方式之一,受到无数市民的推崇,而电动自行车数量的急剧上涨,也严重增加小区管理的负担。记者调查发现,目前电动自行车缺乏有效的管理,使得带车或电瓶上楼充电、乱停乱放、车辆容易被盗等安全问题日益突出,给社区消防安全和管理带来严峻的挑战。…
阅读更多...
Linux 文件系统目录结构及其简要介绍

Linux 文件系统目录结构及其简要介绍

&#x1f44b; 欢迎来到“Linux学习&#xff1a;Linux 文件系统目录结构”篇&#xff01; 接下来让我们一起来学习一下Linux 文件系统目录结构吧&#xff01;祝你有所收获&#xff01; 文章目录 总结表格Linux 文件系统目录结构及其简要介绍补充小资源 小伙伴们都知道&#xff…
阅读更多...
【服务器】MyBatis是如何在java中使用并进行分页的？

【服务器】MyBatis是如何在java中使用并进行分页的？

MyBatis 是一个支持普通 SQL 查询、存储过程和高级映射的持久层框架。它消除了几乎所有的 JDBC 代码和参数的手动设置以及结果集的检索。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java 的 POJO&#xff08;Plain Old Java Objects&#xff0c;普通老式 …
阅读更多...
Elasticsearch-DSL高级查询操作

Elasticsearch-DSL高级查询操作

一、禁用元数据和过滤数据 1、禁用元数据_source GET product/_search {"_source": false, "query": {"match_all": {}} }查询结果不显示元数据 禁用之前: {"took" : 0,"timed_out" : false,"_shards" : {&quo…
阅读更多...
使用 UniApp 在微信小程序中实现 SSE 流式响应

使用 UniApp 在微信小程序中实现 SSE 流式响应

概述 服务端发送事件（Server-Sent Events, SSE）是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道，服务器可以持续地向客户端发送数据，而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。 流式传输的特点是将数据逐步传输给客…
阅读更多...
【Tomcat】第六站（最后一站啦！）：数据的返回

【Tomcat】第六站（最后一站啦！）：数据的返回

1. 引言 前端资源比如html页面&#xff0c;进行返回。截止到目前我们写的项目架构不支持前端页面&#xff08;静态资源 &#xff09;。 2. 数据的返回 2.1 准备 为了能够写前端页面&#xff0c;新建一个项目。选择Maven项目&#xff0c;下一步&#xff0c;下一步。 加载完…
阅读更多...
electron-vite【实战系列教程】

electron-vite【实战系列教程】

创建项目 https://blog.csdn.net/weixin_41192489/article/details/144442262 安装必要的插件 UI 库 element-plus npm install element-plus --save安装 element-plus 图标 npm install element-plus/icons-vue安装插件 – 自动注册组件 vs 自动导入框架方法 npm install -…
阅读更多...
信号处理相关的东东（学习解惑）

信号处理相关的东东（学习解惑）

信号处理相关的东东&#xff08;学习解惑&#xff09; 所有内容学习自知乎专栏&#xff0c;https://www.zhihu.com/column/xinhao&#xff0c;写的很好&#xff0c;值得反复学习 时频域分析的一些常用概念 FROM&#xff1a;https://zhuanlan.zhihu.com/p/35742606 1、相加性…
阅读更多...
[Python学习日记-73] 面向对象实战1——答题系统

[Python学习日记-73] 面向对象实战1——答题系统

[Python学习日记-73] 面向对象实战1——答题系统 简介 需求模型——5w1h8c 领域模型 设计模型 实现模型 案例&#xff1a;年会答题系统 简介 在学习完面向对象之后你会发现&#xff0c;你还是不会自己做软件做系统&#xff0c;这是非常正常的&#xff0c;这是因为计算机软…
阅读更多...
简单工厂模式和策略模式的异同

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点&#xff1a;不同点&#xff1a;目的&#xff1a;结构&#xff1a; C 代码示例简单工厂模式示例&#xff08;以创建图形对象为例&#xff09;策略模式示例&#xff08;以计算价格折扣策略为例&#xff09;UML区别 简单工厂模式和策…
阅读更多...
SQL语句整理五-StarRocks

SQL语句整理五-StarRocks

文章目录 查看版本号&#xff1a;SPLIT&#xff1a;insert 和 update 结合 select&#xff1a;报错&#xff1a;1064 - StarRocks planner use long time 3000 ms in memo phase&#xff1a;字段增删改&#xff1a; 查看版本号&#xff1a; select current_version(); current…
阅读更多...
中化信息与枫清科技深化合作：共探“AI+”产业新生态

中化信息与枫清科技深化合作：共探“AI+”产业新生态

随着数字化转型的浪潮席卷全球&#xff0c;数据已成为推动创新和经济增长的关键力量。为持续深化数据要素价值挖掘与应用实践&#xff0c;推动打造行业交流平台&#xff0c;驱动产业创新共荣&#xff0c;2024 年 12 月 18 日 -19 日&#xff0c;由中国通信标准化协会主办的“20…
阅读更多...
CH340系列芯片驱动电路·CH340系列芯片驱动！！！

CH340系列芯片驱动电路·CH340系列芯片驱动！！！

目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…
阅读更多...
进网许可认证、交换路由设备检测项目更新25年1月起

进网许可认证、交换路由设备检测项目更新25年1月起

实施时间 2025年1月1日起实施 涉及设备范围 核心路由器、边缘路由器、以太网交换机、三层交换机、宽带网络接入服务器&#xff08;BNAS&#xff09; 新增检测依据 GBT41266-2022网络关键设备安全检测方法交换机设备 GBT41267-2022网络关键设备安全技术要求交换机设备 GB/…
阅读更多...
【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

关键词&#xff1a;鸿蒙、ArkTs、Web组件、通讯、数据 官方文档Web组件用法介绍&#xff1a;文档中心 Web 组件加载沙箱中页面可参考我的另一篇文章&#xff1a;【HarmonyOS NEXT】 如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客 目录 如何在鸿蒙应用中加…
阅读更多...
使用k6进行MongoDB负载测试

使用k6进行MongoDB负载测试

1.安装环境 安装xk6-mongo扩展 ./xk6 build --with github.com/itsparser/xk6-mongo 2.安装MongoDB 参考Docker安装MongoDB服务-CSDN博客 连接成功后新建test数据库和sample集合 3.编写脚本 test_mongo.js import xk6_mongo from k6/x/mongo;const client xk6_mongo.new…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023