uni-app (App) 的全局组件注入工具(Vue2/Vue3 都支持)

写 uni-app 的 App 端时,难免会遇到这种产品需求: 全局操作弹窗 全局 Toast 全局消息通知 然而现实是:uni-app 并没有像 Vue 那样的“全局组件注入机制”。 即使你用了 easycom 做到组件“随用随引”,你还是得在每个页面都写一遍: <CustomModal :title="title" :content="content" /> 但这样显然不优雅,而且容易漏加/加错,工程量也大,不利于维护。 所以我做了 uni-global-component-inject 这个 loader:用配置的方式,把全局组件自动注入到每个页面里,并且同时支持: uni-app Vue2(Webpack) uni-app Vue3(Vite) 这个项目解决什么痛点 全局组件不用“每页复制粘贴”了:一次配置,全站注入 可控:可以排除某些页面不注入(比如登录页/纯展示页) 可按平台生效:比如只在 app-plus 注入,不影响小程序/H5 注入的不只是一个“空标签”:你可以自定义注入的 element(带 props / 事件) 怎么用? 在构建侧接入(Vue2 用 loader,Vue3 用 Vite plugin) 在 pages.json 里加一段 injectLoader 配置,告诉它要注入哪些组件 Vue3(Vite)用法 安装: pnpm add uni-global-component-inject -D vite.config.js: import uni from '@dcloudio/vite-plugin-uni' import uniGlobalComponentPlugin from 'uni-global-component-inject/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ uni(), uniGlobalComponentPlugin({ platforms: ['app-plus'], }), ], }) pages.json(示例): ...

January 21, 2026 · 刘胜
树洞