@dongmingzhixiu/vuexir-vite-plugin
Vite 插件:手机壳浏览器预览 + IR 调试 + 页面清单接口。一行接入,无需额外工程。
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vrn from '@dongmingzhixiu/vuexir-vite-plugin';
export default defineConfig({
plugins: [vue(), vrn({ entry: 'src/router.ts', outDir: 'native', pagesDir: 'src/pages' })],
});
装好后:
| 地址 | 说明 |
/__vrn/ | 手机壳预览页(真实 Vue 页面,多页工程自动带 tab/push/返回模拟) |
/__vrn/screens | 页面清单 { mode, screens: [{ name, mode, hasMain }] } |
/__vrn/router | 入口 router 源码 |
/__vrn/page?name=&file= | 302 → /@fs/<abs>(预览动态 import 页面 SFC) |
/__vrn/asset?name=&file= | 预览静态资源(页面 fetch('bundle://x.json') 桥) |
/__vrn/ir?name= | 单页 → IR JSON + 校验结果(调试编译器用) |
选项
interface VrnPluginOptions {
root?: string; // 工程根,默认 Vite root
entry?: string; // 入口:router.ts(多页)/ 单页目录,默认自动探测 src/router.ts、src/router/index.ts
outDir?: string; // 原生产物目录,默认 native/
pagesDir?: string; // 页面目录(单页清单),默认 root/src/pages
preview?: boolean; // 是否挂载 /__vrn/ 预览页,默认 true
}
特性与约束
- 自适应手机壳:PC 显示设备外框 + 工具栏;窄视口/移动端自动切换紧凑模式(去边框、铺满整屏),
与原生端同一套布局语义(R80)。
- 自动放行资源目录:插件会把自身包目录登记进
server.fs.allow,因此用 pnpm/workspace
软链安装时 /@fs 请求不会 403。
- 浏览器预览只验证 Vue 表达(布局/文案/交互状态),像素级还原度以 iOS/Android 模拟器或真机截图为准。
- 页面里可直接
fetch('bundle://data.json'),插件会把该协议桥到 pagesDir 附近的真实文件。
关于 @dongmingzhixiu/vuexir-vite-plugin 的常见问题
@dongmingzhixiu/vuexir-vite-plugin 是什么?
Vite 插件:多页预览中间件(/__vrn/*)+ IR 查看 + HMR 增量 codegen
如何安装 @dongmingzhixiu/vuexir-vite-plugin?
在项目目录运行 npm install @dongmingzhixiu/vuexir-vite-plugin,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:vue(^3.4.0)、vite(^5.0.0 || ^6.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。
@dongmingzhixiu/vuexir-vite-plugin 支持 TypeScript 吗?
支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。
@dongmingzhixiu/vuexir-vite-plugin 支持 ESM 还是 CommonJS?
以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。
@dongmingzhixiu/vuexir-vite-plugin 需要什么版本的 Node.js?
package.json 的 engines 字段要求 Node.js >=18。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。
@dongmingzhixiu/vuexir-vite-plugin 可以商用吗?
@dongmingzhixiu/vuexir-vite-plugin 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。
@dongmingzhixiu/vuexir-vite-plugin 的下载量有多少?
根据 npm 官方下载统计,@dongmingzhixiu/vuexir-vite-plugin 在 2026/10/13 – 2026/11/11 这 30 天内被下载 10,211 次,日均约 340 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。
@dongmingzhixiu/vuexir-vite-plugin 还在维护吗?
最新版本 0.7.9 发布于 2026/11/08(5 天前);至今共发布 57 个版本,其中过去 12 个月发布了 57 个;首次发布于 2026/10/17。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。