viteplus介绍、安装、使用、配置

Vite 是一个统一的前端工具链它将 Vite、Vitest、Oxlint、Oxfmt、Rolldown、tsdown 和 Vite Task 整合到一个工具中同时还能管理 Node.js 运行时和包管理器旨在简化整个前端开发流程。安装 Vite根据你的操作系统运行以下命令进行全局安装macOS / Linuxcurl -fsSL https://vite.plus | bashWindows (PowerShell)irm https://vite.plus/ps1 | iex安装时记得使用winx选择终端管理员安装成功后系统会新增一个全局命令vp。你可以通过vp help查看所有可用命令。核心使用流程1. 创建项目使用vp create命令通过交互式命令行创建新项目、Monorepo或在现有 Monorepo 中创建子应用。vp create该命令会引导你选择项目类型Web 应用、库、Monorepo、包管理器等并自动安装依赖。Vite Monorepo: Create a new Vite monorepo project Vite Application: Create vite applications Vite Library: Create vite libraries单一应用开发选择Vite Application可复用代码模块选择Vite Library多项目协同管理选择Vite MonorepoPS D:\code\viteplus vp create VITE - The Unified Toolchain for the Web Vite Application ◇ Package name: helloworld001 ◇ Which package manager would you like to use? pnpm ◇ Which agents are you using? Writes an instruction file for each selected agent to help it understand vp commands and the project workflow. ChatGPT (Codex) ◇ Which editor are you using? Writes editor config files to enable recommended extensions and Oxlint/Oxfmt integrations. VSCode ◇ Set up pre-commit hooks to run formatting, linting, and type checking with auto-fixes? No ◒ Installing dependencies (20s)命令阶段主要功能输出结果vp dev开发阶段启动开发服务器支持热更新开发环境服务vp build构建阶段生产环境打包优化dist文件夹中的构建产物vp preview预览阶段本地预览生产构建效果可访问的生产环境预览服务帮助文档VitePlus Web 统一工具链使用方法vp [命令]启动命令Startcreate- 从模板创建新项目migrate- 将现有项目迁移到 Viteconfig- 配置钩子和代理集成staged- 在暂存文件上运行代码检查工具install, i- 安装所有依赖项或提供包名时添加包开发命令Developdev- 运行开发服务器check- 运行格式化、 lint 和类型检查lint- 代码 lint 检查fmt- 代码格式化test- 运行测试执行命令Executerun- 运行任务也可作为独立命令vprexec- 从本地 node_modules/.bin 执行命令dlx- 无需安装依赖即可执行包二进制文件cache- 管理任务缓存构建命令Buildbuild- 构建生产环境版本pack- 构建库preview- 预览生产构建结果依赖管理Manage Dependenciesadd- 添加包到依赖项remove, rm, un, uninstall- 从依赖项中移除包update, up- 将包更新到最新版本dedupe- 通过移除旧版本来去重依赖项outdated- 检查过时的包list, ls- 列出已安装的包why, explain- 显示包的安装原因info, view, show- 从注册表查看包信息link, ln- 为本地开发链接包unlink- 解除包链接pm- 将命令转发给包管理器维护命令Maintainupgrade- 将 vp 更新到最新版本implode- 移除 vp 及所有相关数据文档https://viteplus.dev/guide/选项-V, --version- 打印版本信息-h, --help- 打印帮助信息参考资料viteplus配置import{defineConfig,loadEnv}fromviteplus;importpathfrompath;importvuefromvitejs/plugin-vue;importvueJsxfromvitejs/plugin-vue-jsx;// 环境变量类型提示约束 VITE_ 前缀的环境变量类型增强 TS 类型校验type Env{VITE_API_BASE_URL:string;// 接口基础地址VITE_PORT:number;// 开发服务器端口VITE_OPEN:boolean;// 是否自动打开浏览器};// 定义 Viteplus 配置支持根据环境(mode)和命令(command)动态调整配置exportdefaultdefineConfig(({mode,command}){// 加载环境变量从当前目录读取对应 mode 的 .env 文件仅加载 VITE_ 前缀的变量constenvloadEnvEnv(mode,process.cwd(),VITE_);// 判断是否为生产构建环境command 为 build 时是生产构建dev 时是开发环境constisProductioncommandbuild;return{// 项目根目录默认值为 process.cwd()一般无需修改root:process.cwd(),// 部署基础路径生产环境若部署在域名根路径则为 /子路径需配置如 /admin/base:isProduction?/:/,/************************ 开发服务器配置 ************************/server:{// 开发服务器端口优先读取环境变量 VITE_PORT未配置则默认 3000port:env.VITE_PORT||3000,// 启动后是否自动打开浏览器优先读取环境变量 VITE_OPEN未配置则默认 falseopen:env.VITE_OPEN||false,// 允许跨域开发环境下前端请求后端接口必备默认 truecors: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 目录可自定义如 buildoutDir: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 chunkui:[element-plus],// UI 库拆为 ui chunk},// 可选静态资源命名规则[hash] 用于缓存控制// assetFileNames: assets/[ext]/[name]-[hash].[ext],},},// 内置压缩配置无需额外插件一键开启 gzip 压缩compress:{enabled:isProduction,// 仅生产环境开启压缩format:gzip,// 压缩格式也支持 brotlithreshold:10240,// 仅压缩大于 10KB 的文件小文件压缩收益低},// 构建前清空输出目录默认 true避免旧文件残留// emptyOutDir: true,// 可选生产环境构建目标浏览器默认 modules兼容低版本可设为 es2015// target: es2015,},/************************ 路径解析配置 ************************/resolve:{// 路径别名简化文件导入路径避免多层相对路径如 ../../componentsalias:{:path.resolve(__dirname,src),// 核心别名 指向 src 目录// 可选扩展更多别名按需添加// components: path.resolve(__dirname, src/components),// views: path.resolve(__dirname, src/views),},// 省略文件扩展名导入时无需写后缀按优先级匹配如 import App from /App 会匹配 App.vueextensions:[.vue,.ts,.tsx,.js,.jsx,.json],},/************************ Viteplus 约定式路由配置 ************************/router:{// 路由文件根目录自动扫描该目录下的文件生成路由默认 src/viewsdir:src/views,// 路由模式historyH5 模式/ hash哈希模式history 需后端配置 fallbackmode:history,// 排除规则这些文件/目录不生成路由如组件目录、类型文件exclude:[**/components/**],// 路由懒加载默认 true拆分代码块提升首屏加载速度lazy:true,// 可选路由名称生成规则默认 kebab-case短横线命名也支持 camelCase小驼峰// naming: kebab-case,// 可选全局路由守卫文件路径配置后自动引入// guard: src/router/guard.ts,},/************************ Viteplus 自动导入配置 ************************/imports:{// 自动导入 Vue API如 ref、reactive、onMounted 等无需手动 importvue: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 兼容模式设为 jestframework:vitest,// 测试文件匹配规则扫描 src 下所有 .test/.spec 后缀的文件include:[src/**/*.{test,spec}.{js,ts,vue}],// 排除不需要测试的文件exclude:[node_modules/**,dist/**,**/fixtures/**],// 测试环境jsdom 模拟浏览器环境前端组件测试node 用于后端代码测试environment:jsdom,// 测试覆盖率配置coverage:{enabled:modetest,// 仅 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 ModuleecmaVersion: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,// 使用空格而非 Tabsemi: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、UMDfileName:(format)my-component.${format}.js,// 输出文件名},// 应用模式配置type 为 app 时生效app:{afterBuild:node scripts/post-build.js,// 构建完成后执行的自定义脚本如上传静态资源},// 外部依赖库模式下不打包这些依赖由使用者自行安装external:liblib?[vue,element-plus]:[],// 输出目录库模式输出到 lib 目录应用模式输出到 dist 目录outDir:liblib?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,// 校验失败时阻止提交强制代码质量},};});