完善生产查询与登录权限配置

This commit is contained in:
2026-09-03 19:56:19 +08:00
parent 793f140a45
commit 02c8fb7021
438 changed files with 1595 additions and 573 deletions
@@ -0,0 +1 @@
module.exports = require("./root/dist/index.cjs");
@@ -0,0 +1 @@
export * from "./root/dist/index.mjs";
@@ -0,0 +1 @@
export * from './root';
@@ -0,0 +1,161 @@
# vite-plugin-uni-root
UniApp 虚拟根组件 Vite 插件,零额外依赖,纯字符串操作实现。
## 解决的问题
UniApp 不支持原生的根组件包裹机制,无法在全局统一注入 `u-config-provider`、`u-toast`、`u-modal` 等需要在每个页面根部存在的组件。传统方案需要在每个页面手动添加,维护成本高。
本插件通过 Vite 构建时注入,自动为每个页面包裹 `<global-root-view>` 根组件,无需修改任何页面代码本身。
## 技术方案
### 架构
```
App.root.vue(源码) → 在 main.ts 中导入并注册为全局组件 global-root-view
→ 页面模板被包裹 <global-root-view> 页面内容 </global-root-view>
→ 渲染时页面内容填入 <slot />
```
### 工作流程
```
┌─────────────┐ ┌──────────────┐ ┌─────────────────┐
│ main.ts │ → │ 注入 import │ → │ 全局注册组件 │
│ │ │ + 注册代码 │ │ global-root-view │
└─────────────┘ └──────────────┘ └─────────────────┘
│
┌─────────────┐ ┌──────────────┐ │
│ page.vue │ → │ 包裹模板 │ │
│ │ │ <global-...> │ ←─────────┘
└─────────────┘ └──────────────┘
│
┌─────────────┐ │
│ App.root.vue│ → <slot /> 接收页面内容
└─────────────┘
```
### 三步实现
1. **main.ts 注入**(`root.ts -> registerRootApp`)
- 在 main.ts 中注入 `import GlobalRootView from "./App.root.vue"`
- 注入 `app.component("global-root-view", GlobalRootView)` 注册为全局组件
- 注:`GlobalRootView` 仅为局部变量名,实际组件就是 `App.root.vue`
2. **页面模板包裹**(`page.ts -> transformPage`)
- 解析 SFC,定位 `<template>` 标签的起止位置
- 提取 PageMeta 节点(如有则放到包裹层外部)
- 将模板内容包裹在 `<global-root-view>...</global-root-view>` 中
3. **App.root.vue 加载**(`index.ts -> load`)
- 拦截 `App.root.vue` 的模块请求,从文件读取并返回
- 模板中的 `<slot />` 接收并渲染页面内容
### 跨端兼容
插件是纯 Vite 构建时插件,在 UniApp 编译之前完成源代码转换,不依赖任何平台特定 API,所有 UniApp 支持的平台均可正常工作:
| 平台 | 支持 |
|------|------|
| H5 | ✅ |
| 微信小程序 | ✅ |
| 支付宝小程序 | ✅ |
| 头条/抖音小程序 | ✅ |
| Android App | ✅ |
| iOS App | ✅ |
| 鸿蒙 App | ✅ |
## 使用方式
### 1. 创建 App.root.vue
在 `src/` 目录下创建 `App.root.vue` 文件:
```vue
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { useTheme, useLocale } from 'uview-pro';
const { darkMode, themes, currentTheme } = useTheme();
const { currentLocale } = useLocale();
onLoad(() => {
console.log('darkMode->', darkMode.value);
console.log('theme->', currentTheme.value?.name);
console.log('locale->', currentLocale.value?.name);
});
</script>
<template>
<u-config-provider
:dark-mode="darkMode"
:themes="themes"
:current-theme="currentTheme?.name"
:current-locale="currentLocale?.name"
>
<slot />
<u-toast global></u-toast>
<u-modal global></u-modal>
</u-config-provider>
</template>
```
关键点:`<slot />` 是页面内容的渲染位置,必须保留。
### 2. 配置 vite.config.ts
```ts
// npm 安装
import { UniRoot } from 'uview-pro/plugins';
// uni_modules 安装
import { UniRoot } from './src/uni_modules/uview-pro/plugins';
export default defineConfig({
plugins: [
UniRoot(), // 放在其他插件之前
// ...其他插件
],
});
```
### 3. 运行
```bash
npm run dev
```
不需要修改任何页面代码,所有页面自动被 `<global-root-view>` 包裹。
## 文件结构
```
src/uni_modules/uview-pro/plugins/root/
├── index.ts # 插件入口,Vite 插件生命周期
├── root.ts # main.ts 注入 + App.root.vue 处理
├── page.ts # 页面模板包裹转换
└── utils.ts # 工具函数(SFC 解析、pages.json 加载、AST 查找等)
```
## 配置项
```ts
UniRoot({
rootFileName: 'App.root', // 根组件文件名(不含扩展名),默认 App.root
})
```
## HMR 支持
修改 `pages.json` 后自动重载页面列表,无需手动重启开发服务器。
## 注意事项
- Vue 版本需 >= 3.2.13(使用 `vue/compiler-sfc` 的 `parse` API,HBuilderX 环境下自动降级为正则匹配)
- 页面模板中如有 `<page-meta>` 组件,会被提取到包裹层外部,确保微信小程序兼容
- 页面模板中如有嵌套 `<template #slot>` 具名插槽,不影响根模板的正确识别
## 致谢
本插件的实现参考了 [@uni-ku/root](https://github.com/uni-ku/root)(MIT License,作者 skiyee),核心思路受其启发并进行了重新实现。
@@ -0,0 +1,111 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var root_exports = {};
__export(root_exports, {
UniRoot: () => UniRoot,
default: () => root_default
});
module.exports = __toCommonJS(root_exports);
var import_node_path = require("node:path");
var import_node_process = __toESM(require("node:process"));
var import_node_fs = require("node:fs");
var import_vite = require("vite");
var import_root = require("./root.cjs");
var import_page = require("./page.cjs");
var import_utils = require("./utils.cjs");
function normalizeId(id) {
return (0, import_vite.normalizePath)(id).replace(/^[A-Z]:/, (match) => match.toLowerCase());
}
function UniRoot(options) {
options = {
rootFileName: "App.root",
...options
};
const rootPath = import_node_process.default.env.UNI_INPUT_DIR || (0, import_node_path.join)(import_node_process.default.cwd(), "src");
const appRootPath = (0, import_node_path.resolve)(rootPath, `${options.rootFileName}.vue`);
const pagesPath = (0, import_node_path.resolve)(rootPath, "pages.json");
let pagesJson = (0, import_utils.loadPagesJson)(pagesPath, rootPath);
let watcher = null;
let hasPlatformPlugin = false;
const normalizedAppRoot = normalizeId(appRootPath);
return {
name: "vite-plugin-uni-root",
enforce: "pre",
// 在其他插件之前执行,确保页面模板先被包裹
configResolved({ plugins }) {
hasPlatformPlugin = plugins.some((v) => v.name === "vite-plugin-uni-platform");
},
configureServer(server) {
const reload = (0, import_utils.debounce)(() => {
try {
pagesJson = (0, import_utils.loadPagesJson)(pagesPath, rootPath);
server.ws.send({ type: "full-reload" });
} catch (e) {
console.error("[vite-plugin-uni-root] pages.json reload failed:", e);
}
}, 100);
watcher = (0, import_node_fs.watch)(pagesPath, (eventType) => {
if (eventType === "change")
reload();
});
},
load(id) {
const normalizedId = normalizeId(id);
if (normalizedId === normalizedAppRoot) {
const code = (0, import_node_fs.readFileSync)(appRootPath, "utf-8");
return (0, import_root.rebuildRootApp)(code).code;
}
},
async transform(code, id) {
const normalizedId = normalizeId(id);
const normalizedRootPath = normalizeId(rootPath);
if (normalizedId === `${normalizedRootPath}/main.ts` || normalizedId === `${normalizedRootPath}/main.js`) {
return (0, import_root.registerRootApp)(code, options.rootFileName);
}
if (normalizedId === normalizedAppRoot) {
return (0, import_root.rebuildRootApp)(code);
}
const pageId = hasPlatformPlugin ? (0, import_utils.normalizePlatformPath)(normalizedId) : normalizedId;
const isPage = pagesJson.some((p) => pageId === p || pageId.startsWith(`${p}?`));
if (isPage) {
return (0, import_page.transformPage)(code);
}
},
buildEnd() {
if (watcher) {
watcher.close();
watcher = null;
}
}
};
}
var root_default = UniRoot;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
UniRoot
});
@@ -0,0 +1,78 @@
import { resolve, join } from "node:path";
import process from "node:process";
import { watch, readFileSync } from "node:fs";
import { normalizePath } from "vite";
import { registerRootApp, rebuildRootApp } from "./root.mjs";
import { transformPage } from "./page.mjs";
import { loadPagesJson, normalizePlatformPath, debounce } from "./utils.mjs";
function normalizeId(id) {
return normalizePath(id).replace(/^[A-Z]:/, (match) => match.toLowerCase());
}
function UniRoot(options) {
options = {
rootFileName: "App.root",
...options
};
const rootPath = process.env.UNI_INPUT_DIR || join(process.cwd(), "src");
const appRootPath = resolve(rootPath, `${options.rootFileName}.vue`);
const pagesPath = resolve(rootPath, "pages.json");
let pagesJson = loadPagesJson(pagesPath, rootPath);
let watcher = null;
let hasPlatformPlugin = false;
const normalizedAppRoot = normalizeId(appRootPath);
return {
name: "vite-plugin-uni-root",
enforce: "pre",
// 在其他插件之前执行,确保页面模板先被包裹
configResolved({ plugins }) {
hasPlatformPlugin = plugins.some((v) => v.name === "vite-plugin-uni-platform");
},
configureServer(server) {
const reload = debounce(() => {
try {
pagesJson = loadPagesJson(pagesPath, rootPath);
server.ws.send({ type: "full-reload" });
} catch (e) {
console.error("[vite-plugin-uni-root] pages.json reload failed:", e);
}
}, 100);
watcher = watch(pagesPath, (eventType) => {
if (eventType === "change")
reload();
});
},
load(id) {
const normalizedId = normalizeId(id);
if (normalizedId === normalizedAppRoot) {
const code = readFileSync(appRootPath, "utf-8");
return rebuildRootApp(code).code;
}
},
async transform(code, id) {
const normalizedId = normalizeId(id);
const normalizedRootPath = normalizeId(rootPath);
if (normalizedId === `${normalizedRootPath}/main.ts` || normalizedId === `${normalizedRootPath}/main.js`) {
return registerRootApp(code, options.rootFileName);
}
if (normalizedId === normalizedAppRoot) {
return rebuildRootApp(code);
}
const pageId = hasPlatformPlugin ? normalizePlatformPath(normalizedId) : normalizedId;
const isPage = pagesJson.some((p) => pageId === p || pageId.startsWith(`${p}?`));
if (isPage) {
return transformPage(code);
}
},
buildEnd() {
if (watcher) {
watcher.close();
watcher = null;
}
}
};
}
var root_default = UniRoot;
export {
UniRoot,
root_default as default
};
@@ -0,0 +1,76 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var page_exports = {};
__export(page_exports, {
transformPage: () => transformPage
});
module.exports = __toCommonJS(page_exports);
var import_utils = require("./utils.cjs");
async function transformPage(code) {
const sfc = await (0, import_utils.parseSFC)(code);
const openMatch = code.match(/<template\b[^>]*>/);
if (!openMatch)
return null;
const closeTagStart = code.lastIndexOf("</template>");
if (closeTagStart === -1)
return null;
const openTagEnd = openMatch.index + openMatch[0].length;
const content = code.slice(openTagEnd, closeTagStart);
let pageMetaSource = "";
let newContent = content;
if (sfc == null ? void 0 : sfc.template) {
const pageMetaNode = (0, import_utils.findNode)(sfc, "PageMeta");
if (pageMetaNode) {
pageMetaSource = pageMetaNode.loc.source;
const metaStart = pageMetaNode.loc.start.offset;
const metaEnd = pageMetaNode.loc.end.offset;
const metaStartInContent = metaStart - openTagEnd;
const metaEndInContent = metaEnd - openTagEnd;
newContent = content.slice(0, metaStartInContent) + content.slice(metaEndInContent);
}
} else {
const pageMetaMatch = content.match(/<page-meta\b[^>]*>[\s\S]*?<\/page-meta>/);
if (pageMetaMatch) {
pageMetaSource = pageMetaMatch[0];
newContent = content.replace(pageMetaMatch[0], "");
} else {
const selfClosingMatch = content.match(/<page-meta\b[^>]*\/>/);
if (selfClosingMatch) {
pageMetaSource = selfClosingMatch[0];
newContent = content.replace(selfClosingMatch[0], "");
}
}
}
const wrappedContent = `
${pageMetaSource}
<global-root-view>${newContent}</global-root-view>
`;
return {
code: code.slice(0, openTagEnd) + wrappedContent + code.slice(closeTagStart),
map: {
version: 3,
sources: [],
names: [],
mappings: ""
}
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
transformPage
});
@@ -0,0 +1,53 @@
import { parseSFC, findNode } from "./utils.mjs";
async function transformPage(code) {
const sfc = await parseSFC(code);
const openMatch = code.match(/<template\b[^>]*>/);
if (!openMatch)
return null;
const closeTagStart = code.lastIndexOf("</template>");
if (closeTagStart === -1)
return null;
const openTagEnd = openMatch.index + openMatch[0].length;
const content = code.slice(openTagEnd, closeTagStart);
let pageMetaSource = "";
let newContent = content;
if (sfc == null ? void 0 : sfc.template) {
const pageMetaNode = findNode(sfc, "PageMeta");
if (pageMetaNode) {
pageMetaSource = pageMetaNode.loc.source;
const metaStart = pageMetaNode.loc.start.offset;
const metaEnd = pageMetaNode.loc.end.offset;
const metaStartInContent = metaStart - openTagEnd;
const metaEndInContent = metaEnd - openTagEnd;
newContent = content.slice(0, metaStartInContent) + content.slice(metaEndInContent);
}
} else {
const pageMetaMatch = content.match(/<page-meta\b[^>]*>[\s\S]*?<\/page-meta>/);
if (pageMetaMatch) {
pageMetaSource = pageMetaMatch[0];
newContent = content.replace(pageMetaMatch[0], "");
} else {
const selfClosingMatch = content.match(/<page-meta\b[^>]*\/>/);
if (selfClosingMatch) {
pageMetaSource = selfClosingMatch[0];
newContent = content.replace(selfClosingMatch[0], "");
}
}
}
const wrappedContent = `
${pageMetaSource}
<global-root-view>${newContent}</global-root-view>
`;
return {
code: code.slice(0, openTagEnd) + wrappedContent + code.slice(closeTagStart),
map: {
version: 3,
sources: [],
names: [],
mappings: ""
}
};
}
export {
transformPage
};
@@ -0,0 +1,53 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var root_exports = {};
__export(root_exports, {
rebuildRootApp: () => rebuildRootApp,
registerRootApp: () => registerRootApp
});
module.exports = __toCommonJS(root_exports);
function createEmptySourcemap() {
return {
version: 3,
sources: [],
names: [],
mappings: ""
};
}
function registerRootApp(code, fileName = "App.root") {
const importCode = `import GlobalRootView from "./${fileName}.vue";`;
const vueUseComponentCode = `app.component("global-root-view", GlobalRootView);`;
let newCode = importCode + "\n" + code;
const ssrAppMatch = newCode.match(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/);
if (ssrAppMatch) {
newCode = newCode.replace(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/, `$1
${vueUseComponentCode}`);
} else {
newCode = newCode.replace(/(createApp[\s\S]*?)(return\s*\{)/, `$1${vueUseComponentCode}
$2`);
}
return { code: newCode, map: createEmptySourcemap() };
}
function rebuildRootApp(code) {
return { code, map: createEmptySourcemap() };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
rebuildRootApp,
registerRootApp
});
@@ -0,0 +1,29 @@
function createEmptySourcemap() {
return {
version: 3,
sources: [],
names: [],
mappings: ""
};
}
function registerRootApp(code, fileName = "App.root") {
const importCode = `import GlobalRootView from "./${fileName}.vue";`;
const vueUseComponentCode = `app.component("global-root-view", GlobalRootView);`;
let newCode = importCode + "\n" + code;
const ssrAppMatch = newCode.match(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/);
if (ssrAppMatch) {
newCode = newCode.replace(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/, `$1
${vueUseComponentCode}`);
} else {
newCode = newCode.replace(/(createApp[\s\S]*?)(return\s*\{)/, `$1${vueUseComponentCode}
$2`);
}
return { code: newCode, map: createEmptySourcemap() };
}
function rebuildRootApp(code) {
return { code, map: createEmptySourcemap() };
}
export {
rebuildRootApp,
registerRootApp
};
@@ -0,0 +1,136 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var utils_exports = {};
__export(utils_exports, {
debounce: () => debounce,
findNode: () => findNode,
formatPagePath: () => formatPagePath,
loadPagesJson: () => loadPagesJson,
normalizePlatformPath: () => normalizePlatformPath,
parseSFC: () => parseSFC,
stripJsonComments: () => stripJsonComments,
toKebabCase: () => toKebabCase,
toPascalCase: () => toPascalCase
});
module.exports = __toCommonJS(utils_exports);
var import_node_fs = require("node:fs");
var import_node_path = require("node:path");
var import_vite = require("vite");
async function parseSFC(code) {
try {
const { parse } = await import("vue/compiler-sfc");
return parse(code, { pad: "space" }).descriptor;
} catch {
return null;
}
}
function stripJsonComments(str) {
return str.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
}
function formatPagePath(root, path) {
return (0, import_vite.normalizePath)(`${(0, import_node_path.join)(root, path)}.vue`).replace(/^[A-Z]:/, (match) => match.toLowerCase());
}
function loadPagesJson(path, rootPath) {
const raw = (0, import_node_fs.readFileSync)(path, "utf-8");
const { pages = [], subPackages = [] } = JSON.parse(stripJsonComments(raw));
return [
...pages.map((page) => formatPagePath(rootPath, page.path)),
...subPackages.map(({ pages: subPages = [], root = "" }) => {
return subPages.map((page) => formatPagePath((0, import_node_path.join)(rootPath, root), page.path));
}).flat()
];
}
function toKebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
}
function toPascalCase(str) {
return str.replace(/(^\w|-+\w)/g, (match) => match.toUpperCase().replace(/-/g, ""));
}
function findNode(sfc, rawTagName) {
var _a, _b;
const templateSource = (_a = sfc.template) == null ? void 0 : _a.content;
if (!templateSource)
return;
let tagName = "";
if (templateSource.includes(`<${toKebabCase(rawTagName)}`)) {
tagName = toKebabCase(rawTagName);
} else if (templateSource.includes(`<${toPascalCase(rawTagName)}`)) {
tagName = toPascalCase(rawTagName);
}
if (!tagName)
return;
const nodeAst = (_b = sfc.template) == null ? void 0 : _b.ast;
if (!nodeAst)
return;
const traverse = (nodes) => {
var _a2;
for (const node of nodes) {
if (node.type === 1) {
if (node.tag === tagName)
return node;
if ((_a2 = node.children) == null ? void 0 : _a2.length) {
const found = traverse(node.children);
if (found)
return found;
}
}
}
return void 0;
};
return traverse(nodeAst.children);
}
function normalizePlatformPath(id) {
const platform = process.env.UNI_PLATFORM;
if (!platform)
return id;
const regex = new RegExp(`\\.${platform}\\.vue$`);
if (regex.test(id)) {
return id.replace(`.${platform}.`, ".");
}
return id;
}
function debounce(fn, delay) {
let timer = null;
return (...args) => {
if (timer)
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
debounce,
findNode,
formatPagePath,
loadPagesJson,
normalizePlatformPath,
parseSFC,
stripJsonComments,
toKebabCase,
toPascalCase
});
@@ -0,0 +1,95 @@
import { readFileSync } from "node:fs";
import { join } from "node:path";
import { normalizePath } from "vite";
async function parseSFC(code) {
try {
const { parse } = await import("vue/compiler-sfc");
return parse(code, { pad: "space" }).descriptor;
} catch {
return null;
}
}
function stripJsonComments(str) {
return str.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
}
function formatPagePath(root, path) {
return normalizePath(`${join(root, path)}.vue`).replace(/^[A-Z]:/, (match) => match.toLowerCase());
}
function loadPagesJson(path, rootPath) {
const raw = readFileSync(path, "utf-8");
const { pages = [], subPackages = [] } = JSON.parse(stripJsonComments(raw));
return [
...pages.map((page) => formatPagePath(rootPath, page.path)),
...subPackages.map(({ pages: subPages = [], root = "" }) => {
return subPages.map((page) => formatPagePath(join(rootPath, root), page.path));
}).flat()
];
}
function toKebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
}
function toPascalCase(str) {
return str.replace(/(^\w|-+\w)/g, (match) => match.toUpperCase().replace(/-/g, ""));
}
function findNode(sfc, rawTagName) {
var _a, _b;
const templateSource = (_a = sfc.template) == null ? void 0 : _a.content;
if (!templateSource)
return;
let tagName = "";
if (templateSource.includes(`<${toKebabCase(rawTagName)}`)) {
tagName = toKebabCase(rawTagName);
} else if (templateSource.includes(`<${toPascalCase(rawTagName)}`)) {
tagName = toPascalCase(rawTagName);
}
if (!tagName)
return;
const nodeAst = (_b = sfc.template) == null ? void 0 : _b.ast;
if (!nodeAst)
return;
const traverse = (nodes) => {
var _a2;
for (const node of nodes) {
if (node.type === 1) {
if (node.tag === tagName)
return node;
if ((_a2 = node.children) == null ? void 0 : _a2.length) {
const found = traverse(node.children);
if (found)
return found;
}
}
}
return void 0;
};
return traverse(nodeAst.children);
}
function normalizePlatformPath(id) {
const platform = process.env.UNI_PLATFORM;
if (!platform)
return id;
const regex = new RegExp(`\\.${platform}\\.vue$`);
if (regex.test(id)) {
return id.replace(`.${platform}.`, ".");
}
return id;
}
function debounce(fn, delay) {
let timer = null;
return (...args) => {
if (timer)
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
export {
debounce,
findNode,
formatPagePath,
loadPagesJson,
normalizePlatformPath,
parseSFC,
stripJsonComments,
toKebabCase,
toPascalCase
};
@@ -0,0 +1,123 @@
import type { Plugin } from 'vite';
import { resolve, join } from 'node:path';
import process from 'node:process';
import { watch, readFileSync } from 'node:fs';
import { normalizePath } from 'vite';
import { registerRootApp, rebuildRootApp } from './root';
import { transformPage } from './page';
import { loadPagesJson, normalizePlatformPath, debounce } from './utils';
interface UniRootOptions {
/** 根组件文件名(不含扩展名),默认 App.root */
rootFileName?: string;
}
/**
* 规范化模块 ID:统一路径分隔符,统一 Windows 盘符为小写
*/
function normalizeId(id: string) {
return normalizePath(id).replace(/^[A-Z]:/, match => match.toLowerCase());
}
/**
* UniApp 虚拟根组件 Vite 插件
*
* ## 解决的问题
* UniApp 不支持原生的根组件包裹机制,导致无法在全局统一注入
* u-config-provider、u-toast、u-modal 等组件。
*
* ## 工作原理
* 1. 在 main.ts 中注入 App.root.vue 的导入,并注册为全局组件 global-root-view
* 2. 在每个页面的 <template> 中包裹 <global-root-view> 标签
* 3. App.root.vue 中的 <slot /> 渲染页面内容
*
* ## 支持 HMR
* pages.json 变更时自动重载页面列表,无需手动重启
*
* ## 跨端兼容
* 纯 Vite 构建时插件,在所有 UniApp 支持的平台(H5、微信小程序、支付宝小程序、
* 头条小程序、Android App、iOS App、鸿蒙 App)均可正常工作
*/
export function UniRoot(options?: UniRootOptions): Plugin {
options = {
rootFileName: 'App.root',
...options
};
const rootPath = process.env.UNI_INPUT_DIR || join(process.cwd(), 'src');
const appRootPath = resolve(rootPath, `${options.rootFileName}.vue`);
const pagesPath = resolve(rootPath, 'pages.json');
let pagesJson = loadPagesJson(pagesPath, rootPath);
let watcher: ReturnType<typeof watch> | null = null;
let hasPlatformPlugin = false;
const normalizedAppRoot = normalizeId(appRootPath);
return {
name: 'vite-plugin-uni-root',
enforce: 'pre', // 在其他插件之前执行,确保页面模板先被包裹
configResolved({ plugins }) {
// 检测是否有 uni-platform 插件,用于处理平台特定页面路径(如 .mp-weixin.vue)
hasPlatformPlugin = plugins.some(v => v.name === 'vite-plugin-uni-platform');
},
configureServer(server) {
// 监听 pages.json 变更,HMR 热重载页面列表
const reload = debounce(() => {
try {
pagesJson = loadPagesJson(pagesPath, rootPath);
server.ws.send({ type: 'full-reload' });
} catch (e) {
console.error('[vite-plugin-uni-root] pages.json reload failed:', e);
}
}, 100);
watcher = watch(pagesPath, eventType => {
if (eventType === 'change') reload();
});
},
load(id) {
const normalizedId = normalizeId(id);
// 只拦截根 SFC 请求,不拦截 Vue 子模块请求(如 ?vue&type=script)
if (normalizedId === normalizedAppRoot) {
const code = readFileSync(appRootPath, 'utf-8');
return rebuildRootApp(code).code;
}
},
async transform(code, id) {
const normalizedId = normalizeId(id);
const normalizedRootPath = normalizeId(rootPath);
// 注入 App.root.vue 的导入,并注册为全局组件 global-root-view
if (normalizedId === `${normalizedRootPath}/main.ts` || normalizedId === `${normalizedRootPath}/main.js`) {
return registerRootApp(code, options.rootFileName);
}
// App.root.vue 兜底处理(已在 load 中处理,此处只处理根 SFC)
if (normalizedId === normalizedAppRoot) {
return rebuildRootApp(code);
}
// 页面模板包裹 <global-root-view>
const pageId = hasPlatformPlugin ? normalizePlatformPath(normalizedId) : normalizedId;
const isPage = pagesJson.some(p => pageId === p || pageId.startsWith(`${p}?`));
if (isPage) {
return transformPage(code);
}
},
buildEnd() {
if (watcher) {
watcher.close();
watcher = null;
}
}
};
}
export default UniRoot;
export type { UniRootOptions };
@@ -0,0 +1,77 @@
import { parseSFC, findNode } from './utils';
/**
* 页面模板转换:将页面内容包裹在 <global-root-view> 中
*
* <global-root-view> 是 App.root.vue 注册的全局组件,
* 其模板中包含 <slot />,页面内容通过插槽传入。
*
* 处理逻辑:
* 1. 解析 SFC,定位 <template> 标签的起止位置
* 2. 提取模板内容,查找 PageMeta 节点(如有则提取到包裹层外部)
* 3. 将剩余内容包裹在 <global-root-view>...</global-root-view> 中
*
* 降级机制:当 vue/compiler-sfc 不可用(如 HBuilderX 项目)时,
* 使用正则匹配 <page-meta> 标签替代 AST 解析。
*/
export async function transformPage(code: string) {
const sfc = await parseSFC(code);
// 用正则定位 <template> 开头标签
const openMatch = code.match(/<template\b[^>]*>/);
if (!openMatch) return null;
// 使用 lastIndexOf 定位最后一个 </template>,即根 <template> 的闭合标签
// 避免匹配到模板内具名插槽 <template #slot> 的闭合标签
const closeTagStart = code.lastIndexOf('</template>');
if (closeTagStart === -1) return null;
const openTagEnd = openMatch.index! + openMatch[0].length;
const content = code.slice(openTagEnd, closeTagStart);
let pageMetaSource = '';
let newContent = content;
if (sfc?.template) {
// AST 模式:通过 vue/compiler-sfc 解析,精确定位 PageMeta 节点
const pageMetaNode = findNode(sfc, 'PageMeta');
if (pageMetaNode) {
pageMetaSource = pageMetaNode.loc.source;
const metaStart = pageMetaNode.loc.start.offset;
const metaEnd = pageMetaNode.loc.end.offset;
// pageMetaNode.loc 的 offset 是相对于整个文件的,转换为相对于 content 的位置
const metaStartInContent = metaStart - openTagEnd;
const metaEndInContent = metaEnd - openTagEnd;
newContent = content.slice(0, metaStartInContent) + content.slice(metaEndInContent);
}
} else {
// 降级模式:vue/compiler-sfc 不可用,用正则匹配 <page-meta> 标签
const pageMetaMatch = content.match(/<page-meta\b[^>]*>[\s\S]*?<\/page-meta>/);
if (pageMetaMatch) {
pageMetaSource = pageMetaMatch[0];
newContent = content.replace(pageMetaMatch[0], '');
} else {
// 也匹配自闭合的 <page-meta ... />
const selfClosingMatch = content.match(/<page-meta\b[^>]*\/>/);
if (selfClosingMatch) {
pageMetaSource = selfClosingMatch[0];
newContent = content.replace(selfClosingMatch[0], '');
}
}
}
// page-meta 放在包裹层外部,内容包裹在 <global-root-view> 中
const wrappedContent = `\n${pageMetaSource}\n<global-root-view>${newContent}</global-root-view>\n`;
return {
code: code.slice(0, openTagEnd) + wrappedContent + code.slice(closeTagStart),
map: {
version: 3 as const,
sources: [] as string[],
names: [] as string[],
mappings: ''
}
};
}
@@ -0,0 +1,53 @@
/**
* 创建一个最小的 sourcemap,用于满足 Vite/Rollup 的 sourcemap 要求。
*
* 这是一个空映射的 sourcemap(mappings 为空字符串),不提供精确的源码映射,
* 但可以避免 "Sourcemap is likely to be incorrect" 警告。
* 调试器会回退到显示转换后的代码,不影响功能。
*
* 纯 JS 实现,无需第三方依赖。
*/
function createEmptySourcemap() {
return {
version: 3 as const,
sources: [] as string[],
names: [] as string[],
mappings: ''
};
}
/**
* 向 main.ts 注入 App.root.vue 的导入和全局注册
*
* 流程:
* 1. 在文件顶部插入 `import GlobalRootView from "./App.root.vue"`
* 2. 在 createSSRApp 之后插入 `app.component("global-root-view", GlobalRootView)`
*
* 注:GlobalRootView 仅为 main.ts 中的局部变量名,
* 实际组件就是 App.root.vue,页面通过 <global-root-view> 标签使用。
*/
export function registerRootApp(code: string, fileName: string = 'App.root') {
const importCode = `import GlobalRootView from "./${fileName}.vue";`;
const vueUseComponentCode = `app.component("global-root-view", GlobalRootView);`;
let newCode = importCode + '\n' + code;
// 在 createSSRApp 赋值语句之后插入组件注册代码
const ssrAppMatch = newCode.match(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/);
if (ssrAppMatch) {
newCode = newCode.replace(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/, `$1\n ${vueUseComponentCode}`);
} else {
// 兜底:在 return { 之前插入
newCode = newCode.replace(/(createApp[\s\S]*?)(return\s*\{)/, `$1${vueUseComponentCode}\n $2`);
}
return { code: newCode, map: createEmptySourcemap() };
}
/**
* App.root.vue 模板中已使用 <slot /> 作为子内容插槽,
* 无需替换,直接透传。
*/
export function rebuildRootApp(code: string) {
return { code, map: createEmptySourcemap() };
}
@@ -0,0 +1,137 @@
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
import { normalizePath } from 'vite';
/**
* Parse Vue SFC file, return descriptor
*
* When vue/compiler-sfc is not available (e.g. HBuilderX projects where
* vue is not in node_modules), returns null instead of throwing.
* Callers should fall back to regex-based matching.
*/
export async function parseSFC(code: string) {
try {
const { parse } = await import('vue/compiler-sfc');
return parse(code, { pad: 'space' }).descriptor;
} catch {
return null;
}
}
/**
* Strip JSON comments (single-line and multi-line)
*/
export function stripJsonComments(str: string): string {
return str.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
}
/**
* Convert pages.json path to absolute file path
*/
export function formatPagePath(root: string, path: string) {
return normalizePath(`${join(root, path)}.vue`).replace(/^[A-Z]:/, match => match.toLowerCase());
}
/**
* Load pages.json and resolve all page paths (main + subPackages)
*/
export function loadPagesJson(path: string, rootPath: string): string[] {
const raw = readFileSync(path, 'utf-8');
const { pages = [], subPackages = [] } = JSON.parse(stripJsonComments(raw));
return [
...pages.map((page: any) => formatPagePath(rootPath, page.path)),
...subPackages
.map(({ pages: subPages = [], root = '' }: any) => {
return subPages.map((page: any) => formatPagePath(join(rootPath, root), page.path));
})
.flat()
];
}
/**
* camelCase to kebab-case: PageMeta -> page-meta
*/
export function toKebabCase(str: string) {
return str
.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/[_\s]+/g, '-')
.toLowerCase();
}
/**
* kebab-case to PascalCase: page-meta -> PageMeta
*/
export function toPascalCase(str: string) {
return str.replace(/(^\w|-+\w)/g, match => match.toUpperCase().replace(/-/g, ''));
}
interface TagNode {
loc: {
source: string;
start: { offset: number };
end: { offset: number };
};
}
/**
* Find a tag node in SFC template AST by tag name
* Supports both kebab-case and PascalCase
*/
export function findNode(sfc: any, rawTagName: string): TagNode | undefined {
const templateSource = sfc.template?.content;
if (!templateSource) return;
let tagName = '';
if (templateSource.includes(`<${toKebabCase(rawTagName)}`)) {
tagName = toKebabCase(rawTagName);
} else if (templateSource.includes(`<${toPascalCase(rawTagName)}`)) {
tagName = toPascalCase(rawTagName);
}
if (!tagName) return;
const nodeAst = sfc.template?.ast;
if (!nodeAst) return;
// Recursively traverse AST to find the target node
const traverse = (nodes: any): TagNode | undefined => {
for (const node of nodes) {
if (node.type === 1) {
if (node.tag === tagName) return node;
if (node.children?.length) {
const found = traverse(node.children);
if (found) return found;
}
}
}
return undefined;
};
return traverse(nodeAst.children);
}
/**
* Normalize platform-specific page paths (.mp-weixin.vue -> .vue)
*/
export function normalizePlatformPath(id: string) {
const platform = process.env.UNI_PLATFORM;
if (!platform) return id;
const regex = new RegExp(`\\.${platform}\\.vue$`);
if (regex.test(id)) {
return id.replace(`.${platform}.`, '.');
}
return id;
}
/**
* Debounce utility
*/
export function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
let timer: ReturnType<typeof setTimeout> | null = null;
return (...args: Parameters<T>) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}