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

1 引入必要的依赖

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

2 定义初始变量

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文件

/*** @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配置文件

/*** 该函数会扫描项目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下

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

需要运行时，直接运行

npm run dev