Hi我是前端人类学随着 Vue3 的普及和 Vite 的成熟构建一个稳定、可扩展的企业级前端工程化项目已经成为团队协作与长期维护的基石。一个好的脚手架不仅仅是npm init vuelatest它还需要包含代码规范、提交规范、自动化检查以及多环境部署等能力。本文将不依赖任何现成的 CLI 模板从最原始的npm init开始带你一步步手动搭建一个真正能用于生产环境的企业级 Vue3 项目骨架。在这个过程中我们会直面并解决上述所有工程化痛点最终交付一个规范、稳健、自动化的开发底座。文章目录一、初始化项目与依赖安装二、代码规范——ESLint Prettier2.1 安装依赖2.2 配置 .eslintrc.cjs2.3 配置 .prettierrc.cjs2.4 添加 NPM Scripts三、Git Hooks——Husky lint-staged3.1 安装依赖3.2 初始化 Husky3.3 配置 lint-staged3.4 添加 pre-commit Hook四、提交规范——Commitlint4.1 安装依赖4.2 创建配置文件 commitlint.config.cjs4.3 添加 commit-msg Hook五、环境变量与多环境配置5.1 创建环境文件5.2 在代码中使用5.3 在 package.json 中配置运行命令六、打包优化——Vite 配置进阶七、完整的项目脚本命令汇总一、初始化项目与依赖安装我们使用 Vite 官方脚手架快速创建基础项目。# 使用 pnpm推荐或 npm/yarnpnpmcreate vite my-vue3-app--templatevue-tscdmy-vue3-apppnpminstall选择vue-ts模板可以让我们直接获得 Vue3 TypeScript 的完美组合。安装完成后建议调整目录结构为更适合企业级开发的方式src/ ├── api/ # API 请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── layouts/ # 布局组件 ├── router/ # 路由 ├── store/ # Pinia 状态管理 ├── styles/ # 全局样式 ├── types/ # 类型定义 ├── utils/ # 工具函数 └── views/ # 页面视图二、代码规范——ESLint Prettier企业级项目最核心的便是代码一致性。我们将整合ESLint代码质量与Prettier代码格式化。2.1 安装依赖pnpmadd-Deslint prettier typescript-eslint/parser typescript-eslint/eslint-plugin eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier2.2 配置.eslintrc.cjsmodule.exports{root:true,env:{browser:true,node:true,es2021:true,},extends:[plugin:vue/vue3-recommended,eslint:recommended,vue/typescript/recommended,prettier,// 关闭与 Prettier 冲突的规则],parser:vue-eslint-parser,parserOptions:{parser:typescript-eslint/parser,ecmaVersion:2021,sourceType:module,},rules:{vue/multi-word-component-names:off,typescript-eslint/no-explicit-any:warn,typescript-eslint/ban-types:off,},};2.3 配置.prettierrc.cjsmodule.exports{printWidth:100,tabWidth:2,useTabs:false,semi:true,singleQuote:true,trailingComma:es5,bracketSpacing:true,arrowParens:avoid,endOfLine:lf,};2.4 添加 NPM Scriptsscripts:{lint:eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix,format:prettier --write .}三、Git Hooks——Husky lint-staged为了保证提交到仓库的代码是“干净”的我们会在 Git commit 前自动执行代码检查与格式化。3.1 安装依赖pnpmadd-Dhusky lint-staged3.2 初始化 Huskynpx huskyinstall3.3 配置 lint-staged在package.json中添加lint-staged:{*.{vue,js,ts}:[eslint --fix,prettier --write],*.{json,md}:[prettier --write]}3.4 添加 pre-commit Hooknpx huskyadd.husky/pre-commitnpx lint-staged现在每次git commit前都会自动修复和格式化暂存区的代码。四、提交规范——Commitlint统一的提交信息有助于生成 CHANGELOG 和版本管理。我们采用业界流行的Conventional Commits规范。4.1 安装依赖pnpmadd-Dcommitlint/cli commitlint/config-conventional4.2 创建配置文件commitlint.config.cjsmodule.exports{extends:[commitlint/config-conventional],rules:{type-enum:[2,always,[feat,fix,docs,style,refactor,perf,test,chore,revert],],subject-case:[0],},};4.3 添加 commit-msg Hooknpx huskyadd.husky/commit-msgnpx --no-install commitlint --edit$1五、环境变量与多环境配置企业级项目通常有开发、测试、预发布、生产等多个环境。Vite 通过.env文件支持这一点。5.1 创建环境文件在项目根目录下创建.env—— 所有环境公共变量.env.development—— 开发环境.env.staging—— 预发布环境.env.production—— 生产环境示例.env.developmentVITE_APP_TITLE开发环境 VITE_API_BASE_URL/api VITE_ENVdevelopment5.2 在代码中使用// 通过 import.meta.env 访问constapiUrlimport.meta.env.VITE_API_BASE_URL;5.3 在package.json中配置运行命令scripts:{dev:vite,build:dev:vite build --mode development,build:staging:vite build --mode staging,build:prod:vite build --mode production}Vite 会根据--mode参数加载对应的.env.[mode]文件。六、打包优化——Vite 配置进阶在vite.config.ts中针对企业级打包需求进行优化配置。import{defineConfig}fromvite;importvuefromvitejs/plugin-vue;import{resolve}frompath;exportdefaultdefineConfig(({mode})({plugins:[vue()],resolve:{alias:{:resolve(__dirname,src),},},build:{rollupOptions:{output:{manualChunks:{vue:[vue,vue-router,pinia],element:[element-plus],},},},chunkSizeWarningLimit:1000,minify:terser,// 默认 esbuild可以切换为 terser 做更激进压缩},server:{proxy:{/api:{target:https://mock.example.com,changeOrigin:true,rewrite:pathpath.replace(/^\/api/,),},},},}));七、完整的项目脚本命令汇总最终package.json中的scripts应该是这样的scripts:{dev:vite,build:vite build,build:dev:vite build --mode development,build:staging:vite build --mode staging,build:prod:vite build --mode production,preview:vite preview,lint:eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix,format:prettier --write .,prepare:husky install}一个良好的脚手架是团队协作的基石希望这篇文章能帮助你和你的团队快速进入企业级 Vue3 开发状态。如果你觉得有用欢迎收藏或分享给更多朋友