javascript
// vite-plugin-uni-layout.jsimport fs from'fs';import path from'path';exportdefaultfunctionuniLayout() {let pagesPaths = newSet();    // 存储 pages.json 中的页面路径let pagesJsonPath = '';        // pages.json 文件路径// 从 pages.json 读取页面路径列表functionupdatePages() {const content = fs.readFileSync(pagesJsonPath, 'utf-8');const config = JSON.parse(content);        pagesPaths.clear();        (config.pages || []).forEach(page => {            pagesPaths.add(page.path);        });    }return {name: 'vite-plugin-uni-layout',enforce: 'pre',  // 🔍 pre 模式：确保在 @dcloudio/vite-plugin-uni 之前执行//    否则 uni-app 的编译插件会先处理 .vue 文件，//    我们的注入代码会被其内部流程覆盖或丢失// Vite 配置解析完成时调用，初始化 pages.json 路径configResolved(config) {// config.root 为项目根目录，pages.json 通常在 src/ 下            pagesJsonPath = path.resolve(config.root, 'src/pages.json');updatePages();        },// Transform 钩子：转换每个 .vue 文件// id 参数格式：'/path/to/src/pages/index/index.vue?xxx=xxx'//                                    ^^^ Query Stringtransform(code, id) {// 1️⃣ 去除 Query String（如 ?ts=1700000000）//    Vite 热更新时会在 id 追加时间戳，必须清除const cleanId = id.split('?')[0];// 2️⃣ 仅处理 .vue 文件if (!cleanId.endsWith('.vue')) return;// 3️⃣ 计算文件相对于 pages.json 目录的路径//    示例：//    pagesJsonPath  = '/project/src/pages.json'//    cleanId        = '/project/src/pages/index/index.vue'//    dirname        = '/project/src'//    relative       = 'pages/index/index'  (Unix 风格路径)const relativePath = path.relative(                path.dirname(pagesJsonPath), cleanId            ).replace(/\\/g, '/');  // Windows 反斜杠转正斜杠// 4️⃣ 转为路由路径：去掉 .vue 后缀//    'pages/index/index' 匹配 pages.json 中的 pathconst routePath = relativePath.replace(/\.vue$/, '');// 5️⃣ 仅对 pages.json 中注册的页面注入容器if (!pagesPaths.has(routePath)) return;// 6️⃣ 核心：包裹 <template> 内容区域//    找到 <template> 标签的开始位置和结束位置const templateOpenRegex = /<template[^>]*>/;const templateOpenMatch = code.match(templateOpenRegex);if (templateOpenMatch) {const openTag = templateOpenMatch[0];                    // '<template>'const openIndex = templateOpenMatch.index + openTag.length; // 内容起始位置const closeIndex = code.lastIndexOf('</template>');       // 内容结束位置if (closeIndex > openIndex) {const before = code.substring(0, openIndex);   // '<template>' 之前const content = code.substring(openIndex, closeIndex);  // 模板内容const after = code.substring(closeIndex);      // '</template>' 之后// 注入 AppLayout 组件return`${before}\n<AppLayout>\n${content}\n</AppLayout>\n${after}`;                }            }        }    };}

vue
<template>  <view class="content">    <text>Hello World</text>  </view></template>

vue
<template><AppLayout>  <view class="content">    <text>Hello World</text>  </view></AppLayout></template>

javascript
// 使用 @vue/compiler-sfc 精确解析import { parse } from'@vue/compiler-sfc'const { descriptor } = parse(code)const templateContent = descriptor.template.content// 然后精确操作 AST

javascript
exportdefaultfunctionmyPlugin() {return {name: 'my-plugin',enforce: 'pre',  // ✅ 在默认插件之前执行（如 @dcloudio/vite-plugin-uni）// enforce: 'post', // 后置执行    }}

javascript
configResolved(config) {// config.root: string - 项目根目录// config.srcDir?: string - src 目录（如果有）// config.plugins: Plugin[] - 按执行顺序排列的插件列表    pagesJsonPath = path.resolve(config.root, 'src/pages.json');}

javascript
transform(code, id) {// code: string - 文件原始内容// id: string   - 文件绝对路径 + query string//// 返回值类型：// - null/undefined: 不处理，交由后续插件// - string: 替换后的内容// - { code, map }: 替换内容 + Source Map}

javascript
import { defineConfig } from'vite';import uniLayout from'./vite/plugins/vite-plugin-uni-layout';import uni from'@dcloudio/vite-plugin-uni';exportdefaultdefineConfig({plugins: [uniLayout(),  // 全局容器插件uni(),    ],});

vue
<template>  <view class="app-layout">    <header class="layout-header">      <slot name="header">        <text class="header-title">{{ title }}</text>      </slot>    </header>    <main class="layout-content">      <slot></slot>    </main>    <footer class="layout-footer" v-if="showTabBar">      <slot name="footer"></slot>    </footer>  </view></template><script>export default {    name: 'AppLayout',    props: {        title: {            type: String,            default: 'App Name'        },        showTabBar: {            type: Boolean,            default: true        }    }};</script><style scoped>.app-layout {    display: flex;    flex-direction: column;    height: 100vh;    background-color: #f5f5f5;}.layout-header {    height: 88rpx;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    color: #fff;    display: flex;    align-items: center;    padding: 0 30rpx;}.layout-content {    flex: 1;    overflow-y: auto;}.layout-footer {    height: 100rpx;    background: #fff;    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);}</style>

json
{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"首页"}},{"path":"pages/list/list","style":{"navigationBarTitleText":"列表"}}],"globalStyle":{"navigationBarTextStyle":"white","navigationBarTitleText":"应用名称","navigationBarBackgroundColor":"#667eea"}}