Architecture for Splitting Route Configuration

To maintain a scalable uni-app project, splitting the pages. into modular files is essential. This approach separates the core application settings from individual page routes and subpackage definitions.

Directory Structure

config/
├── routing/
│   ├── modules/
│   │   ├── home.js      
│   │   ├── user.js      
│   │   └── process.js   
│   ├── appConfig.js     
│   └── generateConfig.js 
src/
└── pages.           

Module Definitions

Each module in the modules/ directory exports a configuration object. A typical module structure consists of a base URL and a list of child routes.

// config/routing/modules/home.js example
module.exports = {
  rootPath: 'pages/index/',
  pages: [
    { route: 'index', label: 'Dashboard' },
    { route: 'details', label: 'Details View' }
  ]
};

Dynamic Configuration Generator

The core logic resides in generateConfig.js. This script aggregates the modular configurations, merges them with global settings, and overwrites the main pages. file. It handles both main pages and subpackages, creating a backup of the existing configuration before overwriting.

const fs = require('fs');
const path = require('path');

// Import global settings
const appSettings = require('./appConfig.js');

// Import route modules
const homeRoutes = require('./modules/home.js');
const userRoutes = require('./modules/user.js');

// Import subpackage modules
const workflowPackage = require('./modules/process.js');

// Configuration lists
const MAIN_MODULES = [homeRoutes, userRoutes];
const SUBPACKAGE_MODULES = [workflowPackage];

/**
 * Transforms a module definition into main page routes
 * @param {Object} moduleConfig - The module configuration object
 */
const compileMainRoutes = (moduleConfig) => {
  const { rootPath, pages } = moduleConfig;
  return pages.map(page => ({
    path: `${rootPath}${page.route}`,
    style: {
      navigationBarTitleText: page.label
    }
  }));
};

/**
 * Transforms a module definition into a subpackage structure
 * @param {Object} moduleConfig - The subpackage module configuration object
 */
const compileSubPackages = (moduleConfig) => {
  const { rootPath, pages } = moduleConfig;
  return {
    root: rootPath,
    pages: pages.map(page => ({
      path: page.route,
      style: {
        navigationBarTitleText: page.label
      }
    }))
  };
};

// Aggregate all routes
const assembleConfig = () => {
  const mainPages = MAIN_MODULES.flatMap(compileMainRoutes);
  const subPackages = SUBPACKAGE_MODULES.map(compileSubPackages);

  return {
    ...appSettings,
    pages: mainPages,
    subPackages: subPackages
  };
};

// File paths
const TARGET_DIR = path.resolve(__dirname, '../src');
const CONFIG_FILE = path.join(TARGET_DIR, 'pages.');
const BACKUP_FILE = path.join(TARGET_DIR, 'pages..backup');

// Execution Logic
const finalConfig = assembleConfig();

// Backup existing file if it exists
if (fs.existsSync(CONFIG_FILE)) {
  try {
    fs.renameSync(CONFIG_FILE, BACKUP_FILE);
    console.log('Previous configuration backed up successfully.');
  } catch (err) {
    console.error('Backup failed:', err);
  }
}

// Write the new configuration
fs.writeFile(CONFIG_FILE, JSON.stringify(finalConfig, null, 2), 'utf8', (err) => {
  if (err) {
    console.error('Error writing pages.:', err);
  } else {
    console.log('pages. generated successfully.');
  }
});

Integration with Package.

To automate the generation process, add a script to your package.. This allows the configuration to be built before starting the development server or during the build process.

{
  "scripts": {
    "dev:app": "npm run gen:pages && npm run serve",
    "build:app": "npm run gen:pages && npm run build",
    "gen:pages": "node config/routing/generateConfig.js",
    "serve": "...your existing serve command..."
  }
}

Running npm run dev:app will first execute the node script to update pages. and then launch the uni-app development server, ensuring the route configuration is always up to date.