Vite+Vue3多页面项目实战：动态配置入口与多环境变量管理

1. 为什么需要多页面应用架构最近接手了一个中后台管理系统重构项目遇到了一个典型场景系统包含客服工单和数据分析两个完全独立的模块它们共享相同的UI组件库和用户认证体系但业务逻辑完全没有交集。这种场景下传统的单页面应用(SPA)架构就显得有些臃肿了。多页面应用(MPA)架构在这种情况下就派上了用场。我实测下来发现用ViteVue3搭建多页面项目有几个明显优势模块隔离更彻底每个子模块可以独立开发部署不会因为某个模块的改动影响其他功能按需加载更灵活用户访问哪个模块才加载对应资源首屏性能更好技术栈统一所有模块共享相同的构建工具和基础依赖维护成本低不过在实际配置过程中我发现动态入口和多环境变量管理这两个环节最容易踩坑。下面就把我的实战经验分享给大家。2. 项目结构设计与基础配置2.1 目录结构规划先来看我的项目结构设计这个方案经过了三个项目的验证project-root/ ├── src/ │ ├── packages/ # 多页面模块目录 │ │ ├── moduleA/ # 模块A │ │ │ ├── assets/ │ │ │ ├── components/ │ │ │ ├── views/ │ │ │ └── index.html # 模块A入口文件 │ │ └── moduleB/ # 模块B │ │ ├── assets/ │ │ ├── components/ │ │ ├── views/ │ │ └── index.html │ ├── shared/ # 公共资源 │ │ ├── components/ # 公共组件 │ │ └── utils/ # 公共工具函数 ├── vite.config.ts # Vite配置文件 └── package.json这种结构的关键点在于每个业务模块都是完整的SPA应用公共资源通过shared目录集中管理模块间通过软链接或npm workspace实现依赖共享2.2 基础Vite配置在vite.config.ts中我们需要先设置基础配置import { defineConfig } from vite import vue from vitejs/plugin-vue import { resolve } from path export default defineConfig({ plugins: [vue()], resolve: { alias: { : resolve(__dirname, src), shared: resolve(__dirname, src/shared) } } })这里特别要注意alias配置它能让模块间的引用更清晰。比如在moduleA中引用公共组件import Button from shared/components/Button.vue3. 动态入口配置实战3.1 环境变量驱动入口切换多页面应用的核心就是动态入口配置。我的方案是通过环境变量决定打包哪个模块import { loadEnv } from vite export default ({ mode }) { const env loadEnv(mode, process.cwd()) const moduleName env.VITE_MODULE || moduleA return defineConfig({ build: { rollupOptions: { input: resolve(__dirname, src/packages/${moduleName}/index.html) } } }) }这样在打包时通过指定不同环境变量就能生成不同模块的包# 打包moduleA vite build --mode moduleA # 打包moduleB vite build --mode moduleB3.2 多入口同时打包如果需要同时打包所有模块可以这样配置const modules [moduleA, moduleB] export default defineConfig({ build: { rollupOptions: { input: modules.reduce((entries, module) { entries[module] resolve(__dirname, src/packages/${module}/index.html) return entries }, {}) } } })这样会生成包含所有模块的完整包适合全量部署的场景。4. 多环境变量管理技巧4.1 环境变量文件规范我推荐的环境变量文件结构.env # 全局默认配置 .env.development # 开发环境 .env.production # 生产环境 .env.moduleA # 模块A特殊配置 .env.moduleB # 模块B特殊配置文件内容示例# .env.moduleA VITE_API_BASEhttps://api.moduleA.com VITE_MODULEmoduleA4.2 智能环境变量加载在vite.config.ts中实现智能加载export default ({ mode }) { const baseEnv loadEnv(, process.cwd()) // 加载全局配置 const modeEnv loadEnv(mode, process.cwd()) // 加载模式特定配置 const env { ...baseEnv, ...modeEnv } return defineConfig({ define: { process.env: env } }) }4.3 类型安全的环境变量为了更好的开发体验建议在src目录下添加env.d.tsinterface ImportMetaEnv { readonly VITE_API_BASE: string readonly VITE_MODULE: string } interface ImportMeta { readonly env: ImportMetaEnv }这样在代码中使用环境变量时就有类型提示了console.log(import.meta.env.VITE_API_BASE)5. 开发与构建优化5.1 开发环境配置在package.json中添加快捷命令{ scripts: { dev:moduleA: vite --mode moduleA, dev:moduleB: vite --mode moduleB, dev:all: concurrently \npm:dev:moduleA\ \npm:dev:moduleB\ } }使用concurrently可以同时启动多个模块的开发服务器。5.2 构建配置优化生产环境构建建议配置build: { outDir: dist/${env.VITE_MODULE}, emptyOutDir: true, rollupOptions: { output: { chunkFileNames: assets/[name]-[hash].js, entryFileNames: assets/[name]-[hash].js, assetFileNames: assets/[name]-[hash][extname], manualChunks(id) { if (id.includes(node_modules)) { return vendor } } } } }5.3 按需加载公共依赖对于大型项目建议将公共依赖外链build: { rollupOptions: { external: [vue, vue-router], output: { globals: { vue: Vue, vue-router: VueRouter } } } }然后在HTML中通过CDN引入script srchttps://cdn.jsdelivr.net/npm/vue3.2.47/dist/vue.global.min.js/script6. 常见问题解决方案在实际项目中遇到过几个典型问题热更新失效确保每个模块的vite server配置正确建议为每个模块单独配置dev server公共组件重复打包通过配置manualChunks将node_modules下的依赖打包为单独文件环境变量不生效检查.env文件命名是否正确确保loadEnv调用顺序合理CSS样式污染为每个模块添加scoped样式或者使用CSS Modules路由冲突建议每个模块使用独立的路由实例通过base参数区分最近一个电商后台项目采用这套方案后构建时间从原来的3分钟降低到40秒左右开发体验提升非常明显。特别是在多人协作场景下不同团队可以专注于自己的模块开发互不干扰。