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

最新推荐文章于 2025-04-19 17:21:29 发布

ApiHug

最新推荐文章于 2025-04-19 17:21:29 发布

阅读量832

点赞数 22

本文链接：https://blog.youkuaiyun.com/AK15221736052/article/details/144600008

版权

ApiHug 同时被 3 个专栏收录

93 篇文章

订阅专栏

ApiSmart

60 篇文章

订阅专栏

ApiUI

3 篇文章

订阅专栏

目的

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

所以

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

筹备

js 基本知识：熟练
css: 知晓
vue: 知晓

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

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

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

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

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

ApiSmart Api design Copilot - ApiHugApiSmart make your api design and implement happierhttps://apihug.com/zhCN-docs/copilot

001 Internal - vite-config

涵盖信息：

vite 配置
vite 插件
环境变量

谁使用？你项目的 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 配置。

关键组件

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

关键组件

导入：
- 代码导入了 Vite 插件的类型和一些具体的插件。
- 还导入了一些自定义插件模块。
loadConditionPlugins 函数：
- 接受一个条件插件数组 conditionPlugins。
- 遍历每个条件插件，如果条件为真，则加载相应的插件。
loadCommonPlugins 函数：
- 根据通用选项加载常用的 Vite 插件。
- 包括 Vue 支持、Vue JSX 支持、开发工具、元数据注入和可视化工具。
loadApplicationPlugins 函数：
- 根据应用程序选项加载特定的 Vite 插件。
- 支持的功能包括国际化、打印信息、懒加载表格、模拟数据、应用加载注入、许可证、PWA 支持、压缩、HTML 插件、导入映射、额外的应用配置和归档。
loadLibraryPlugins 函数：
- 根据库选项加载特定的 Vite 插件。
- 支持的功能包括生成类型声明文件（dts）。
插件条件：
- 每个插件都有一个条件，只有在条件为真时才会加载该插件。
- 例如，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);
});