前言

今天看到了尤大大开源了Vite+,而且是MiT开源，在此膜拜大佬并且学习Vite+，希望网上调侃的前端秦始皇构建工具的愿景成真，哈哈。

什么是vite+？

vite+也称呼为vite plus 是vue作者尤雨溪及其公司VoidZero制作的一款工具，定位为 Vite 的「即插即用超集」，核心是把原本分散的开发、构建、测试、代码检查、格式化、库打包、Monorepo 管理等全流程能力，用 Rust 重写并集成到一个 CLI 里，解决前端工具链碎片化、配置繁琐、性能不足的问题。

怎么安装？

运行以下命令进行安装vite+

Windows使用
irm https://vite.plus/ps1 | iex

macOS / Linux使用
curl -fsSL https://vite.plus | bash

有的同学开启的是cmd窗口，运行时会提示如下错误，

解决方式 使用win+X选择PowerShell窗口，然后再运行上述命令即可开启安装

如图，就表示安装成功了

怎么配置？

官方提供的配置描述如下,描述是：Vite+ 将项目配置集中存放于 vite.config.ts 中，允许你将许多顶层的配置文件整合到单一文件中。你可以继续使用你的 Vite 配置，比如 server 或 build，并为工作流的其余部分添加 Vite+ 模块，因此我们可以通过自己的需求动态的添加配置项。

import { defineConfig } from 'vite-plus';

export default defineConfig({
  server: {},
  build: {},
  preview: {},

  test: {},
  lint: {},
  fmt: {},
  run: {},
  pack: {},
  staged: {},
});

下面是一份配置完善的指南文档,大家可以按需配置。

import { defineConfig, loadEnv } from 'viteplus';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// 环境变量类型提示：约束 VITE_ 前缀的环境变量类型，增强 TS 类型校验
type Env = {
  VITE_API_BASE_URL: string; // 接口基础地址
  VITE_PORT: number; // 开发服务器端口
  VITE_OPEN: boolean; // 是否自动打开浏览器
};

// 定义 Viteplus 配置：支持根据环境(mode)和命令(command)动态调整配置
export default defineConfig(({ mode, command }) => {
  // 加载环境变量：从当前目录读取对应 mode 的 .env 文件，仅加载 VITE_ 前缀的变量
  const env = loadEnv<Env>(mode, process.cwd(), 'VITE_');
  // 判断是否为生产构建环境（command 为 build 时是生产构建，dev 时是开发环境）
  const isProduction = command === 'build';

  return {
    // 项目根目录：默认值为 process.cwd()，一般无需修改
    root: process.cwd(),
    // 部署基础路径：生产环境若部署在域名根路径则为 '/'，子路径需配置如 '/admin/'
    base: isProduction ? '/' : '/',

    /************************ 开发服务器配置 ************************/
    server: {
      // 开发服务器端口：优先读取环境变量 VITE_PORT，未配置则默认 3000
      port: env.VITE_PORT || 3000,
      // 启动后是否自动打开浏览器：优先读取环境变量 VITE_OPEN，未配置则默认 false
      open: env.VITE_OPEN || false,
      // 允许跨域：开发环境下前端请求后端接口必备，默认 true
      cors: true,
      // 监听所有网卡：设为 0.0.0.0 后，同一局域网内其他设备可通过 IP 访问项目
      host: '0.0.0.0',
      // 接口代理配置：解决开发环境跨域问题，将 /api 前缀的请求转发到后端接口地址
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL, // 后端接口基础地址（从环境变量读取）
          changeOrigin: true, // 开启跨域：修改请求头中的 Origin 为 target 地址
          rewrite: (path) => path.replace(/^\/api/, ''), // 移除请求路径中的 /api 前缀
          // secure: false, // 可选：若后端接口是 HTTPS 但证书不合法，需关闭 SSL 验证（仅测试用）
          // timeout: 5000, // 可选：代理请求超时时间，默认 30000ms
        },
      },
      // 可选：热更新配置，默认开启，关闭可设为 hmr: false
      // hmr: true,
      // 可选：端口被占用时是否自动切换端口，默认 true
      // strictPort: false,
    },

    /************************ 构建配置 ************************/
    build: {
      // 构建输出目录：生产构建后文件输出到 dist 目录，可自定义如 'build'
      outDir: 'dist',
      // 静态资源目录：构建后图片/样式/字体等静态资源放在 dist/assets 下
      assetsDir: 'assets',
      // SourceMap 生成：生产环境关闭（减少体积），开发环境开启（方便调试）
      sourcemap: !isProduction,
      // 代码压缩：生产环境用 esbuild（更快），开发环境不压缩；也可设为 'terser'（压缩率更高但慢）
      minify: isProduction ? 'esbuild' : false,
      // Rollup 构建选项：精细化控制打包流程（Rollup 是 Vite 底层构建工具）
      rollupOptions: {
        output: {
          // 手动拆分代码块：将第三方依赖拆分为单独 chunk，提升缓存命中率
          manualChunks: {
            vue: ['vue', 'vue-router', 'pinia'], // Vue 核心生态拆为 vue chunk
            ui: ['element-plus'], // UI 库拆为 ui chunk
          },
          // 可选：静态资源命名规则，[hash] 用于缓存控制
          // assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        },
      },
      // 内置压缩配置：无需额外插件，一键开启 gzip 压缩
      compress: {
        enabled: isProduction, // 仅生产环境开启压缩
        format: 'gzip', // 压缩格式，也支持 'brotli'
        threshold: 10240, // 仅压缩大于 10KB 的文件（小文件压缩收益低）
      },
      // 构建前清空输出目录：默认 true，避免旧文件残留
      // emptyOutDir: true,
      // 可选：生产环境构建目标浏览器，默认 'modules'，兼容低版本可设为 'es2015'
      // target: 'es2015',
    },

    /************************ 路径解析配置 ************************/
    resolve: {
      // 路径别名：简化文件导入路径，避免多层相对路径（如 ../../components）
      alias: {
        '@': path.resolve(__dirname, 'src'), // 核心别名：@ 指向 src 目录
        // 可选：扩展更多别名，按需添加
        // '@components': path.resolve(__dirname, 'src/components'),
        // '@views': path.resolve(__dirname, 'src/views'),
      },
      // 省略文件扩展名：导入时无需写后缀，按优先级匹配（如 import App from '@/App' 会匹配 App.vue）
      extensions: ['.vue', '.ts', '.tsx', '.js', '.jsx', '.json'],
    },

    /************************ Viteplus 约定式路由配置 ************************/
    router: {
      // 路由文件根目录：自动扫描该目录下的文件生成路由，默认 src/views
      dir: 'src/views',
      // 路由模式：history（H5 模式）/ hash（哈希模式），history 需后端配置 fallback
      mode: 'history',
      // 排除规则：这些文件/目录不生成路由（如组件目录、类型文件）
      exclude: ['**/components/**'],
      // 路由懒加载：默认 true，拆分代码块，提升首屏加载速度
      lazy: true,
      // 可选：路由名称生成规则，默认 kebab-case（短横线命名），也支持 camelCase（小驼峰）
      // naming: 'kebab-case',
      // 可选：全局路由守卫文件路径，配置后自动引入
      // guard: 'src/router/guard.ts',
    },

    /************************ Viteplus 自动导入配置 ************************/
    imports: {
      // 自动导入 Vue API：如 ref、reactive、onMounted 等，无需手动 import
      vue: true,
      // 自动导入 Pinia API：如 defineStore、storeToRefs 等
      pinia: true,
      // 自动导入 Vue Router API：如 useRouter、useRoute 等
      vueRouter: true,
      // 生成类型声明文件：解决 TS 类型提示问题，路径可自定义
      dts: 'src/auto-imports.d.ts',
      // 可选：自定义工具函数自动导入
      // imports: [
      //   {
      //     from: '@/utils/request',
      //     imports: ['request', 'get', 'post'],
      //   },
      // ],
    },

    /************************ CSS 配置 ************************/
    css: {
      // 预处理器配置：针对 SCSS/LESS 等注入全局变量/混合器
      preprocessorOptions: {
        scss: {
          // 自动注入全局 SCSS 变量：所有 SCSS 文件无需 import 即可使用 variables.scss 中的变量
          additionalData: `@import "@/styles/variables.scss";`,
        },
      },
      // 可选：CSS 模块化配置，默认仅 .module.scss/.module.css 文件生效
      // modules: {
      //   // 开发环境保留名称方便调试，生产环境用 hash 缩短类名
      //   generateScopedName: isProduction ? '[hash:base64:8]' : '[name]__[local]___[hash:base64:5]',
      // },
    },

    /************************ 插件配置 ************************/
    plugins: [
      // Vue 插件：支持 .vue 文件编译，开启 script setup 语法糖
      vue({
        script: {
          setup: {
            // 可选：开启 Vue 3 响应式语法糖（如 $ref）
            // reactivityTransform: true,
          },
        },
      }),
      // Vue JSX 插件：支持 .tsx/.jsx 文件编译
      vueJsx(),
      // 可选：添加其他插件，如 unplugin-vue-components（自动导入组件）
    ],

    /************************ Viteplus 测试配置（集成 Vitest） ************************/
    test: {
      // 测试框架：默认 vitest，支持 jest 兼容模式（设为 'jest'）
      framework: 'vitest',
      // 测试文件匹配规则：扫描 src 下所有 .test/.spec 后缀的文件
      include: ['src/**/*.{test,spec}.{js,ts,vue}'],
      // 排除不需要测试的文件
      exclude: ['node_modules/**', 'dist/**', '**/fixtures/**'],
      // 测试环境：jsdom 模拟浏览器环境（前端组件测试），node 用于后端代码测试
      environment: 'jsdom',
      // 测试覆盖率配置
      coverage: {
        enabled: mode === 'test', // 仅 test 环境（npm run test）开启覆盖率统计
        reporter: ['text', 'html', 'lcov'], // 输出格式：终端文本 + HTML 报告 + lcov 报告
        include: ['src/**/*.{js,ts,vue}'], // 统计范围：src 下所有源码文件
        exclude: ['src/**/*.d.ts', 'src/mocks/**'], // 排除类型文件、模拟数据文件
      },
      // 全局测试初始化文件：如全局挂载 Vue、配置测试工具
      setupFiles: ['src/test/setup.ts'],
      // 监听模式：非 test 环境（如开发时）开启监听，修改代码自动重跑测试
      watch: mode !== 'test',
    },

    /************************ Viteplus 代码检查配置（集成 ESLint） ************************/
    lint: {
      // 检查文件匹配规则：src 下所有前端源码文件
      include: ['src/**/*.{js,ts,vue,tsx,jsx}'],
      // 排除不需要检查的文件
      exclude: ['node_modules/**', 'dist/**', 'src/**/*.d.ts'],
      // ESLint 核心配置：替代单独的 .eslintrc.js 文件
      config: {
        parser: 'vue-eslint-parser', // Vue 文件解析器
        parserOptions: {
          parser: '@typescript-eslint/parser', // TS 文件解析器
          sourceType: 'module', // 模块化模式（ES Module）
          ecmaVersion: 'latest', // 支持最新 ES 特性
        },
        extends: [
          'eslint:recommended', // ESLint 推荐规则
          'plugin:vue/vue3-recommended', // Vue 3 推荐规则
          'plugin:@typescript-eslint/recommended', // TS 推荐规则
          'prettier', // 兼容 Prettier（关闭 ESLint 中与 Prettier 冲突的规则）
        ],
        rules: {
          'vue/script-setup-uses-vars': 'error', // 强制 script setup 中使用定义的变量
          '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], // 未使用变量警告（忽略下划线开头的参数）
          'vue/no-unused-components': 'warn', // 未使用组件警告
        },
      },
      fix: true, // 自动修复可修复的 ESLint 错误（如缩进、分号）
      formatter: 'stylish', // 输出格式：stylish（易读）、pretty（美观）、json（机器解析）
    },

    /************************ Viteplus 代码格式化配置（集成 Prettier） ************************/
    fmt: {
      // 格式化文件匹配规则：覆盖源码、配置、文档文件
      include: ['src/**/*.{js,ts,vue,tsx,jsx,json,scss,md}'],
      // 排除不需要格式化的文件
      exclude: ['node_modules/**', 'dist/**'],
      // Prettier 核心配置：替代单独的 .prettierrc 文件
      config: {
        printWidth: 120, // 单行最大字符数
        tabWidth: 2, // 缩进空格数
        useTabs: false, // 使用空格而非 Tab
        semi: true, // 语句结尾加分号
        singleQuote: true, // 使用单引号
        trailingComma: 'es5', // 尾逗号（ES5 兼容模式）
        bracketSpacing: true, // 对象括号前后加空格（{ a: 1 } 而非 {a:1}）
        vueIndentScriptAndStyle: true, // Vue 文件中 script/style 标签缩进
      },
      write: true, // 格式化后自动写入文件（无需手动执行 prettier --write）
    },

    /************************ Viteplus 脚本运行配置（替代 package.json scripts） ************************/
    run: {
      // 自定义脚本：可通过 viteplus run [脚本名] 执行
      scripts: {
        dev: {
          command: 'viteplus dev', // 脚本命令
          env: 'development', // 关联环境：读取 .env.development 文件
          args: ['--host', '0.0.0.0', '--port', '3000'], // 命令行参数
        },
        build: {
          command: 'viteplus build',
          env: 'production', // 关联生产环境
          args: ['--mode', 'production'],
        },
        test: {
          command: 'viteplus test',
          env: 'test', // 关联测试环境
          watch: true, // 监听模式
        },
        preview: {
          command: 'viteplus preview',
          args: ['--port', '4000'], // 预览端口
        },
      },
      cwd: process.cwd(), // 脚本运行目录，默认当前目录
      verbose: true, // 输出详细日志，方便调试
    },

    /************************ Viteplus 打包分发配置（应用/库打包） ************************/
    pack: {
      // 打包类型：app（应用打包，默认）/ lib（库/组件包打包）
      type: 'app',
      // 库模式配置（type 为 lib 时生效）
      lib: {
        entry: path.resolve(__dirname, 'src/components/index.ts'), // 库入口文件
        name: 'MyComponent', // 全局变量名（UMD 格式下可用 window.MyComponent 访问）
        formats: ['es', 'cjs', 'umd'], // 输出格式：ES 模块、CommonJS、UMD
        fileName: (format) => `my-component.${format}.js`, // 输出文件名
      },
      // 应用模式配置（type 为 app 时生效）
      app: {
        afterBuild: 'node scripts/post-build.js', // 构建完成后执行的自定义脚本（如上传静态资源）
      },
      // 外部依赖：库模式下不打包这些依赖（由使用者自行安装）
      external: 'lib' === 'lib' ? ['vue', 'element-plus'] : [],
      // 输出目录：库模式输出到 lib 目录，应用模式输出到 dist 目录
      outDir: 'lib' === 'lib' ? 'lib' : 'dist',
    },

    /************************ Viteplus 提交前校验配置（集成 lint-staged） ************************/
    staged: {
      // 暂存区文件校验规则：仅校验提交的文件，提升效率
      rules: {
        '*.{js,ts,vue,tsx,jsx}': ['viteplus lint', 'viteplus fmt'], // 代码文件先检查再格式化
        '*.{scss,css}': ['viteplus fmt'], // 样式文件仅格式化
        '*.{json,md}': ['viteplus fmt'], // 配置/文档文件仅格式化
      },
      fix: true, // 自动修复校验错误
      ignoreBranch: ['main', 'master'], // 主分支跳过校验（可选，根据团队规范调整）
      blockCommit: true, // 校验失败时阻止提交，强制代码质量
    },
  };
});

vite+和vite有什么区别？

vite+不是vite的一次版本升级，而是前端的工具链整合，在也不用管很多的插件配置文件了而是统一在viteconfig中进行配置，并且统一通过vp命令实现使用，它是基于原生 Vite 封装的企业级构建工具，核心是在 Vite 原生配置基础上新增了一批工程化、提效类配置项，同时对部分原生配置做了增强封装。 具体几项如下

一、路由增强（约定式路由核心）

原生 Vite 无路由相关配置（需手动配置 Vue Router/React Router），Viteplus 内置约定式路由，新增：

配置项	作用
router	约定式路由总配置，包含子项：- dir：路由文件根目录（默认 src/views）- mode：路由模式（hash/history）- exclude：排除自动生成路由的文件 / 目录- lazy：路由懒加载开关- naming：路由名称生成规则（kebab-case/camelCase 等）- guard：全局路由守卫文件路径

二、自动导入增强

原生 Vite 需通过 unplugin-auto-import 实现自动导入，Viteplus 内置并简化配置，新增：

配置项	作用
imports	自动导入总配置，包含子项：- vue：自动导入 Vue API（ref/reactive 等）- pinia：自动导入 Pinia API（defineStore 等）- vueRouter：自动导入 Vue Router API（useRouter 等）- imports：自定义工具函数自动导入- dts：生成类型声明文件路径

三、工程化能力（核心新增）

原生 Vite 无这些配置，需依赖第三方工具（ESLint/Prettier/Vitest/lint-staged），Viteplus 内置并统一配置：

配置项	作用
test	集成 Vitest 测试配置：- framework：测试框架（vitest/jest）- include/exclude：测试文件匹配规则- environment：测试环境（jsdom/node）- coverage：测试覆盖率配置- setupFiles：全局测试初始化文件
lint	集成 ESLint 代码检查：- include/exclude：检查文件匹配规则- config：内嵌 ESLint 配置（替代 .eslintrc）- fix：自动修复可修复错误- formatter：输出格式
fmt	集成 Prettier 代码格式化：- include/exclude：格式化文件匹配规则- config：内嵌 Prettier 配置（替代 .prettierrc）- write：格式化后自动写入文件
run	替代 package.json scripts 的脚本运行配置：- scripts：自定义脚本（命令 / 环境 / 参数）- cwd：脚本运行目录- verbose：日志详细程度
pack	应用 / 库打包分发配置（增强原生 build.lib）：- type：打包类型（app/lib）- lib：库模式配置（入口 / 名称 / 格式）- app：应用模式配置（后置钩子）- external：打包忽略的依赖- outDir：输出目录
staged	集成 lint-staged 提交前校验：- rules：暂存文件校验规则（匹配规则 + 执行命令）- fix：自动修复- ignoreBranch：跳过校验的分支- blockCommit：校验失败阻止提交

四、环境变量增强

原生 Vite 仅 loadEnv 函数，Viteplus 新增专属配置简化环境管理：

配置项	作用
env	环境变量总配置：- dir：环境文件目录（默认根目录）- prefix：环境变量前缀（默认 VITE_）- inject：全局注入的环境变量（无需 import 即可使用）

五、日志增强

原生 Vite 日志配置简单，Viteplus 新增精细化日志控制：

配置项	作用
log	日志配置：- level：日志级别（info/warn/error/silent）- analyze：构建完成后显示打包体积分析- clearScreen：是否清空终端屏幕

六、原生配置增强（封装 / 简化）

这类配置原生 Vite 也有，但 Viteplus 做了封装优化，更易用：

Viteplus 配置	原生 Vite 对应配置	增强点
build.compress	需手动安装 vite-plugin-compression	内置 gzip/brotli 压缩，无需额外插件，一键开启
css.modules.generateScopedName	原生需手动写函数	内置生产 / 开发环境差异化命名规则，无需手动判断环境
optimizeDeps	原生同名配置	内置常用依赖（vue/pinia/axios）预构建，减少手动配置 include

配置完成，怎么使用？

1修改导入，原先是通过vite导出的，修改成如下从vite-plus中导出

2修改pack的脚本 原先是比如原先是 vite build 现在改成vp build，命令基本如下，比如dev 就是vp dev

3修改配置文件名称，之前是vite.config.ts 现在修改为viteplus.config.ts

接下来尝试启动

通过npm run dev启动，都能成功，至此改造完成，完结撒花。

总结

目前其他命令还没尝试使用，但是已经接入了Vite+ 后续可以通过这个执行一系列的操作了。通过接入vite+,实现了工具链的统一配置，统一命令。 参考文档：viteplus.dev/config/