通过npm run XXX命令生成uniapp的pages.json文件

1 引入必要的依赖

javascript 复制代码

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

2 定义初始变量

javascript 复制代码

const defaultPages = [
  {
    path: "pages/index/index"
  }
];
const defaultSettings = {
  globalStyle: {
    h5: {
      animationType: "fade-in",
      animationDuration: 300
    },
    navigationBarBackgroundColor: "#0081ff",
    navigationBarTitleText: "",
    navigationStyle: "custom",
    navigationBarTextStyle: "white"
  }
};
const inputUrl = "src/pages";
const outputUrl = "src/pages.json";

3 读取目标目录

递归读取目录中的所有.vue文件

javascript 复制代码

/**
 * @param {string} dir - 要读取的目录
 * @returns {Promise<string[]>} .vue文件的完整路径数组
 */
async function readVueFilesRecursive(dir) {
  let results = [];
  const entries = await fs.promises.readdir(dir, { withFileTypes: true });
  for (const entry of entries) {
    const fullPath = path.join(dir, entry.name);
    if (entry.isDirectory()) {
      // 递归读取子目录
      const subDirResults = await readVueFilesRecursive(fullPath);
      results = results.concat(subDirResults);
    } else if (entry.isFile() && entry.name.endsWith(".vue")) {
      // 只处理.vue文件
      results.push(fullPath);
    }
  }
  return results;
}

4 生成文件

异步生成pages.json配置文件

javascript 复制代码

/**
 * 该函数会扫描项目src/pages目录下的所有.vue文件，
 * 并根据这些文件生成一个包含页面路由信息的pages.json配置文件。
 *
 * @returns {Promise<void>} 无返回值的Promise
 */
async function generatePagesJson() {
  console.info("正在生成 pages.json...");
  const projectRoot = process.cwd();
  const srcDir = path.join(projectRoot, inputUrl);
  const outputFile = path.join(projectRoot, outputUrl);

  // 确保输出文件的目录存在
  const outputDir = path.dirname(outputFile);
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
    console.info(`已创建目录: ${outputDir}`);
  }

  try {
    // 递归读取所有.vue文件
    const vueFiles = await readVueFilesRecursive(srcDir);
    const pages = [];
    // 添加默认页面到pages数组
    pages.push(...defaultPages);
    // 遍历所有.vue文件并将其转换为页面路径
    for (let i = 0; i < vueFiles.length; i++) {
      const file = vueFiles[i];
      const load = path
        .relative(projectRoot, file)
        .replace("src\\", "")
        .replace(/\\/g, "/")
        .replace(/\.vue/g, "");

      // 过滤掉components目录中的文件
      if (new RegExp("/components/").test(load)) continue;

      // 过滤掉已在默认页面中定义的路径
      if (defaultPages.findIndex(item => item.path === load) > -1) continue;
      pages.push({
        path: load
      });
    }
    // 创建JSON内容
    const jsonContent = JSON.stringify(
      {
        ...defaultSettings,
        pages: pages
      },
      null,
      2
    );

    // 写入文件
    await fs.promises.writeFile(outputFile, jsonContent, "utf8");
    console.info(`已更新 pages.json，包含 ${pages.length} 个Vue文件`);
  } catch (error) {
    console.error(`生成pages.json时出错: ${error.message}`);
    process.exit(1);
  }
}

5 配置运行命令

将配置放入到package.json中的scripts下

json 复制代码

"pages": "node ./src/utils/generate-pages.js"

需要运行时，直接运行

复制代码

npm run dev