Vite

写 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（示例）： ...

qqmap-uniapp：腾讯地图SDK的现代化解决方案 基于腾讯官方微信小程序JavaScript SDK v1.2，专为现代化开发环境打造的ES模块版本 背景：为什么需要这个包？ 在开发基于 Vue3 + Vite 的 uni-app 项目时，笔者遇到了两个关键问题： 问题1：模块格式不兼容 腾讯官方提供的 qqmap-wx-jssdk.min.js 是一个 CommonJS 格式的文件，而现代构建工具如 Vite、Webpack 5+ 默认使用 ES Module（ESM） 格式。 // ❌ 官方SDK使用CommonJS格式 var QQMapWX = require('qqmap-wx-jssdk.min.js'); // ✅ Vue3 + Vite需要ESM格式 import QQMapWX from 'qqmap-uniapp'; 问题表现： Vite 无法正确解析 module.exports，导致导入失败 编译错误：require is not defined or ReferenceError: Can't find variable: require __ERROR 问题2：平台限制过于严格 官方SDK只支持微信小程序环境，使用了 wx.request 进行网络请求，这限制了其在其他平台的使用： // 官方SDK中只使用wx.request wx.request({ url: 'https://apis.map.qq.com/ws/...', success: function(res) { /* ... */ } }); 在 uni-app 跨平台开发中，我们需要使用 uni.request 来实现一套代码多端运行。 问题表现： ...