前言
今天看到了尤大大开源了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/
登录