在全球化的 HR 伙伴类项目中，前端团队往往分布在不同的国家与地区，需要在同一套员工管理、薪酬核算与请假流程的系统上并行工作。Vue 3 提供的工程化能力，结合 Monorepo 与自动化构建，能够把多区域的业务差异收敛到独立模块中，让各地开发者互不阻塞。本文围绕实际落地的架构与代码实践，说明如何用 Vue 3 搭建可扩展的全球 HR 前端工程。
依赖治理与 Monorepo 拆分策略
全球 HR 系统最头疼的问题是依赖版本不一致。欧洲团队若升级了 <datepicker> 组件，亚太团队可能还在用旧版，导致构建失败或运行时报错。采用 pnpm 加 Turborepo 的 Monorepo 结构，可以把公共组件、接口层与区域业务包分开管理。根目录只锁定 Vue 3 与 Vite 的主版本，各区域包在自身 package.json 中声明细微差异。
具体目录可设计为 packages/core 存放登录与权限，packages/i18n 存放语言包，packages/eu、packages/ap 分别存放区域规则。这样柏林同事修改排班逻辑时，不会触动新加坡的税务计算代码。下面给出一个简化的 Monorepo 构建脚本，用于只构建改动的区域包：
pnpm install pnpm --filter ./packages/ap build pnpm --filter ./packages/eu test
这种拆分也方便做按需发布。当拉美区域需要紧急合规更新，只需对该包打 tag，主站通过动态导入加载对应版本，不影响其他区域访问。相比过去用 Git 分支硬隔离，Monorepo 让类型定义与工具函数真正复用，减少重复代码约三成。
多语言与合规开关的模块化实现
HR 系统必然面对多语言，且不同国家字段合法性不同。Vue 3 的 provide 与 inject 适合注入当前区域上下文。我们定义一个 <region-provider> 组件，在应用入口根据域名后缀切换语言包与合规规则。语言文件本身用 JSON 管理，构建时按区域 tree-shaking，避免把所有语种打进同一包。
合规开关例如“是否显示种族字段”“工龄计算基准日”等，可抽象为配置对象。下方代码展示如何在组合式函数中读取区域配置并控制表单：
import { inject } from 'vue'
export function useCompliance() {
const region = inject('regionConfig')
const showEthnicity = region.fields.includes('ethnicity')
const seniorityBase = region.seniorityBase || 'hire_date'
return { showEthnicity, seniorityBase }
}
在模板中直接使用该函数返回值条件渲染。由于配置与组件解耦，法务团队更新规则后前端无需改代码，只需发配置包。这种写法比 Vue 2 的 mixin 更清晰，类型推导也更准确，新成员容易看懂哪些字段受区域影响。
基于 Vite 的构建提速与团队协作流
Vue 3 官方推荐 Vite，其 ESBuild 预编译让冷启动从 webpack 的数十秒降到两秒内。对跨时区团队，夜里提交的代码早上能被他人秒级拉起调试，显著减少沟通成本。我们在 CI 中配置 Vite 的 build 与 preview，并用 splitVendor 把 Vue 与区域包分离，提升缓存命中。
以下为 Vite 配置片段，演示如何按区域名动态忽略不需要的国际化资源：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
main: 'index.html',
ap: 'regions/ap.html'
}
}
}
})
协作流上，各区域开独立开发服务器，通过内部 npm 代理拉取彼此的包预览版。遇到接口契约变化，先用 TypeScript 接口包发 alpha 版，再同步调整。整体看，Vue 3 工程化不是单点工具，而是把组织协作方式固化进代码结构的系统方法，能让全球 HR 伙伴真正同步交付。