一个项目用配置打出不同的包

前端同一套代码多包不同命令构建，多个成品

完整版 · 精简版 · 嵌入版 · 白标版 —— 不用复制仓库，
源码共用，配置不同，打包命令不同。

npm run build:full
npm run build:lite
npm run build:embed
→ 三个文件夹，一条代码线

✅ 比较适合

两个页面 长得像，差几个模块
要 真的减小体积（Lite 包）
多个版本一起发版，改 bug 只改一处

⚠️ 不太适合

两个产品完全两码事，共用 < 30%
只差接口地址、log 开关 → 用环境变量
需要运行时开关功能 → 远程配置

命令 → 配置 → 同一份源码 → 不同成品

build:lite → config.lite.js → src/ 源码 → dist/lite/

轻量实现

差别写进配置文件

// config.full.js
export default { features: { showFileUpload: true, showUrlImport: true } };

// config.lite.js
export default { features: { showFileUpload: false, showUrlImport: false } };

代码统一引用 @app/config，构建时替换

命令选中不同配置

{
  "scripts": {
    "build:full": "vite build --config vite.full.js",
    "build:lite": "vite build --config vite.lite.js"
  }
}

构建配置工厂函数，alias 指向对应 config，outDir 分目录

模板与逻辑用开关

// 模板
<nav v-if="config.features.showUrlImport">从网址导入</nav>

// 逻辑
if (!config.features.showTypePicker) { startCreate(name); return; }

大模块按需导入 · 精简版“真瘦”

// modules.full.js → 导出完整组件
// modules.lite.js → 空导出
import * as extra from '@app/modules'; // 精简版为空，不会打包多余代码

用 v-if 藏起来不够，要 构建时就不引入

入口文件·可共用也可分壳

共用 main.js 最省事；如果壳不同（嵌入版无导航），可放 apps/full/index.html 与 apps/lite/index.html。

构建配置 vs 环境变量 vs 运行时开关

⚙️ 构建配置（本文）

功能有无、流程差异
打包时定死，能减体积
例：lite 无“网址导入”

🌱 环境变量 .env

API 地址、debug、key
打包时注入，代码仍在
例：API_URL

🔄 运行时开关

远程配置，随时变
同一个包，A/B 测试
例：临时关活动入口

➕ 加一个新版本（embed）

新建 config.embed.js
新建 modules.embed.js
加 vite.embed.js
package.json 加脚本
模板加对应 v-if

一般不用复制 App.vue

✅ 检查清单

dist/full 与 dist/lite 分开放
精简版体积明显更小
精简版搜不到完整版专属组件名
修 bug 只改共用代码