[vite] 按需加载指定路由

网上方案大多基于webpack，所以分享下如何在vite实现，欢迎交流指错。

手段

• define: 定义全局变量（构建时被静态替换）
• glob-import: 从文件系统导入模块读取
• 环境变量: 区分载入不同模块(路由)

代码

/* =========== package.json ========== */
"dev:wz": "pnpm dev --mode WenZhou",
"build:wz": "pnpm build --mode WenZhou",
"preview:wz": "pnpm build:wz && vite preview --host --open"

/* =========== vite.config.ts ========== */
defineConfig(({ mode }) => {
  return {
    // 定义全局变量（构建时被静态替换）
    define: {
      __MODULE_NAME__: JSON.stringify(mode)
    },

/* =========== vite-env.d.ts ========== */
// 局部模块名
declare const __MODULE_NAME__: string;

/* =========== vue-router ========== */
// 导入所有局部模块(路由)
const modulesFiles = import.meta.glob('./modules/*.ts', { import: 'default', eager: true });

// 如果指定区域，那就只加载对应区域的路由，否则加载所有
let asyncRoutes: any = [];
for (const path in modulesFiles) {
  asyncRoutes = asyncRoutes.concat(modulesFiles[path]);
  if (path.includes(__MODULE_NAME__)) {
    asyncRoutes = modulesFiles[path];
    break;
  }
}