npm - @dev-to/vue-plugin - Versions diffs - 0.2.2 → 0.3.0 - Mend

@dev-to/vue-plugin 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/debugHtml.d.ts +20 -0
package/dist/debugHtml.d.ts.map +1 -0
package/dist/debugTools.d.ts.map +1 -1
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1246 -111
package/dist/libBuildUtils.d.ts +44 -0
package/dist/libBuildUtils.d.ts.map +1 -0
package/dist/loaderUmdWrapper.d.ts +13 -0
package/dist/loaderUmdWrapper.d.ts.map +1 -0
package/package.json +2 -2

package/dist/index.js CHANGED Viewed

@@ -4,9 +4,11 @@ import { DEV_TO_BASE_PATH, DEV_TO_DEBUG_HTML_PATH, DEV_TO_DEBUG_JSON_PATH, DEV_T
 import { exec } from "node:child_process";
 import node_fs from "node:fs";
 import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import node_os from "node:os";
+import typescript from "typescript";
 const PLUGIN_NAME = `${DEV_TO_NAMESPACE}_${DEV_TO_VUE_NAMESPACE}`;
-const constants_PLUGIN_LOG_PREFIX = `[${DEV_TO_NAMESPACE}:${DEV_TO_VUE_NAMESPACE}]`;
+const PLUGIN_LOG_PREFIX = `[${DEV_TO_NAMESPACE}:${DEV_TO_VUE_NAMESPACE}]`;
 const STABLE_BASE_PATH = DEV_TO_BASE_PATH;
 const STABLE_DISCOVERY_PATH = DEV_TO_DISCOVERY_PATH;
 const STABLE_DEBUG_HTML_PATH = DEV_TO_DEBUG_HTML_PATH;
@@ -18,6 +20,529 @@ const STABLE_LOADER_UMD_PATH = DEV_TO_VUE_LOADER_UMD_PATH;
 const STABLE_LOADER_BASE_PATH = DEV_TO_VUE_LOADER_BASE_PATH;
 const EVENT_FULL_RELOAD = DEV_TO_VUE_EVENT_FULL_RELOAD;
 const EVENT_HMR_UPDATE = DEV_TO_VUE_EVENT_HMR_UPDATE;
+function renderDebugHtml(params) {
+    const { resolvedDevComponentMap, entryPathMap = {}, audit, stats, originCandidates, actualPort, configFilePath } = params;
+    const { defaultEntryAbs, defaultEntryExists, componentMapCount } = audit;
+    const hasConfig = Object.keys(resolvedDevComponentMap).length > 0;
+    const isWildcardOnly = hasConfig && 1 === Object.keys(resolvedDevComponentMap).length && resolvedDevComponentMap['*'];
+    const projectRoot = configFilePath ? node_path.dirname(configFilePath) : process.cwd();
+    const projectRootDisplay = projectRoot.replace(/\\/g, '/');
+    const getShortPath = (absPath)=>{
+        try {
+            const rel = node_path.relative(projectRoot, absPath).replace(/\\/g, '/');
+            return rel.startsWith('.') ? rel : `./${rel}`;
+        } catch  {
+            return absPath;
+        }
+    };
+    const toVsCodeUrl = (p)=>`vscode://file/${p.replace(/\\/g, '/')}`;
+    const escapeHtml = (s)=>s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const annotatedConfigHtml = (()=>{
+        if (!configFilePath || !node_fs.existsSync(configFilePath)) return '';
+        try {
+            const content = node_fs.readFileSync(configFilePath, 'utf-8');
+            const lines = [];
+            const dim = (s)=>`<span class="cmt-dim">${escapeHtml(s)}</span>`;
+            const map = (s)=>`<span class="cmt-mapping">${escapeHtml(s)}</span>`;
+            lines.push(dim('/**'));
+            lines.push(dim(` * ${PLUGIN_NAME} 解析结果:`));
+            lines.push(dim(` *   - 默认入口: ${getShortPath(defaultEntryAbs)} (${defaultEntryExists ? '存在' : '缺失'})`));
+            lines.push(dim(' *   - 组件映射解析 (Resolved Component Map):'));
+            Object.entries(resolvedDevComponentMap).forEach(([name, entry])=>{
+                lines.push(map(` *     - ${name} -> ${entry}`));
+            });
+            lines.push(dim(' */'));
+            return `${lines.join('\n')}\n\n${escapeHtml(content)}`;
+        } catch (e) {
+            return escapeHtml(`// ${PLUGIN_LOG_PREFIX} 无法读取配置文件: ${e}`);
+        }
+    })();
+    return `<!doctype html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>${PLUGIN_NAME} Debug</title>
+    <style>
+        :root { --p: #42b883; --t: #1e293b; --m: #64748b; --b: #e2e8f0; --r: 12px; }
+        * { box-sizing: border-box; }
+        body { font-family: -apple-system, system-ui, sans-serif; background: #f8fafc; color: #1a202c; margin: 0; padding: 24px; line-height: 1.6; }
+        .container { max-width: 1000px; margin: 0 auto; }
+        .header, .card { background: #fff; border-radius: var(--r); border: 1px solid var(--b); margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
+        .header { padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; }
+        .card { padding: 24px; }
+        .header h1 { margin: 0; font-size: 24px; color: var(--t); }
+        .header p, .muted { color: var(--m); font-size: 14px; margin: 4px 0 0; }
+        .header-status { display: flex; gap: 12px; flex-wrap: wrap; }
+        .status-pill { border: 1px solid var(--b); font-weight: 500; display: flex; align-items: center; background: #f8fafc; padding: 6px 16px; border-radius: 20px; font-size: 13px; color: #475569; }
+        .status-pill b { color: var(--t); margin-left: 6px; }
+        .card h3 { margin: 0 0 20px; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--t); }
+        .card h3::before { content: ''; width: 3px; height: 16px; background: var(--p); border-radius: 2px; }
+        .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; }
+        .alert-info { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
+        .alert-error { background: #fef2f2; color: #991b1b; border-color: #fee2e2; }
+        .alert-warning { background: #fffbeb; color: #92400e; border-color: #fef3c7; }
+        .setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 20px; }
+        .setup-card {
+            background: #fff; border: 1.5px solid var(--b); border-radius: 8px; padding: 10px 14px;
+            transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; flex-direction: column;
+        }
+        .setup-card:hover { border-color: var(--p); background: #f0fdf4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+        .setup-card.active { border-color: var(--p); background: #f0fdf4; }
+        .setup-card .type { font-size: 9px; text-transform: uppercase; color: var(--m); font-weight: 700; margin-bottom: 6px; display: inline-flex; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; width: fit-content; }
+        .setup-card.active .type { background: #dcfce7; color: var(--p); }
+        .setup-card .url { font-family: SFMono-Regular, Consolas, monospace; font-size: 13px; color: var(--t); font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }
+        .setup-card .action { font-size: 11px; color: var(--m); display: flex; align-items: center; gap: 4px; margin-top: auto; }
+        .setup-card:hover .action, .setup-card.active .action { color: var(--p); }
+        .manual-box { background: #fcfdfe; border: 1px solid var(--b); border-radius: 8px; margin-top: 16px; overflow: hidden; }
+        .manual-header { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; color: var(--m); font-size: 11px; font-weight: 600; background: #f8fafc; border-bottom: 1px solid var(--b); }
+        .copy-btn-link { background: #fff; border: 1px solid var(--b); color: var(--t); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: .2s; }
+        .copy-btn-link:hover { border-color: var(--p); color: var(--p); }
+        #fullCmdPreview { margin: 0; padding: 14px 16px; border: none; background: transparent; }
+        .info-grid { display: grid; grid-template-columns: 100px 1fr; gap: 12px 16px; margin-bottom: 24px; align-items: baseline; font-size: 13px; }
+        .info-label { color: var(--m); font-weight: 500; }
+        table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; border: 1px solid #f1f5f9; border-radius: 8px; overflow: hidden; }
+        th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
+        th { background: #f8fafc; color: var(--m); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
+        code, pre { font-family: SFMono-Regular, Consolas, monospace; font-size: .9em; }
+        code { background: #f1f5f9; padding: 3px 6px; border-radius: 4px; color: #475569; font-weight: 500; }
+        .code-name { color: #42b883; background: #f0fdf4; border: 1px solid #bbf7d0; }
+        .link-code { color: #42b883; text-decoration: none; padding: 2px 6px; border-radius: 4px; transition: .2s; display: inline-flex; align-items: center; gap: 4px; background: #f0fdf4; border: 1px solid #bbf7d0; }
+        .link-code:hover { background: #dcfce7; color: #166534; border-color: #86efac; }
+        .link-code code { background: 0 0; padding: 0; color: inherit; }
+        .link-code::after { content: '\\2197'; font-size: 11px; opacity: .6; }
+        details { margin-top: 16px; border: 1px solid #f1f5f9; border-radius: 10px; padding: 12px 16px; background: #fafbfc; }
+        summary { cursor: pointer; color: #475569; font-size: 14px; font-weight: 600; outline: 0; }
+        summary:hover { color: var(--p); }
+        pre { background: #f0fdf4; color: #2d3748; padding: 14px 16px; border-radius: 8px; font-size: 12px; border: 1px solid var(--b); margin: 12px 0; line-height: 1.6; overflow-x: auto; }
+        .cmt { color: #718096; font-style: italic; }
+        .kw { color: #42b883; font-weight: 600; }
+        .str { color: #059669; }
+        .val { color: #d97706; }
+        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+        .stat-card { background: #f8fafc; padding: 20px; border-radius: 10px; text-align: center; border: 1px solid #f1f5f9; }
+        .stat-card .value { font-size: 24px; font-weight: 700; color: var(--p); margin-bottom: 4px; }
+        .stat-card .label { font-size: 12px; color: var(--m); text-transform: uppercase; font-weight: 600; }
+        .parameter-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--b); }
+        .parameter-item:last-child { border-bottom: none; }
+        .parameter-name { font-weight: 600; color: var(--t); margin-bottom: 6px; display: block; font-size: 14px; }
+        .info-value, .parameter-info { font-size: 13px; color: #4a5568; line-height: 1.7; }
+        .cmt-dim { opacity: 0.4; }
+        .cmt-mapping { color: var(--p); font-weight: 600; }
+        /* 响应式优化：移动端 (480px以下) */
+        @media (max-width: 480px) {
+            body { padding: 12px; }
+            .header { padding: 16px; flex-direction: column; align-items: flex-start; gap: 16px; }
+            .header-status { width: 100%; gap: 8px; }
+            .status-pill { padding: 4px 12px; font-size: 12px; }
+            .card { padding: 16px; }
+            .info-grid { grid-template-columns: 1fr; gap: 4px; }
+            .info-label { font-size: 12px; margin-bottom: 2px; }
+            .stats-grid { grid-template-columns: 1fr; }
+            .stat-card { padding: 12px; }
+            .stat-card .value { font-size: 20px; }
+            table { display: table; width: 100%; border-radius: 6px; }
+            th, td { padding: 10px 8px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
+            th br, th .muted { display: none; }
+            pre { padding: 10px; font-size: 11px; }
+            .setup-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
+            .setup-card { padding: 8px 10px; }
+            .setup-card .url { font-size: 12px; margin-bottom: 4px; }
+            .setup-card .action { font-size: 10px; }
+            .build-grid { grid-template-columns: 1fr !important; }
+        }
+        .build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
+        .build-card { background:#f8fafc; padding:16px; border-radius:10px; border:1px solid #edf2f7; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="header-main">
+                <h1>${PLUGIN_NAME}</h1>
+                <p>Vue 组件开发调试面板 - Vite ESM + HMR</p>
+            </div>
+            <div class="header-status">
+                <div class="status-pill">组件<b>${componentMapCount}</b></div>
+                <div class="status-pill">入口<b style="color: ${defaultEntryExists ? '#10b981' : '#ef4444'}">${defaultEntryExists ? '✓' : '✗'}</b></div>
+                <div class="status-pill">端口<b id="actualPortDisplay">-</b></div>
+            </div>
+        </div>
+        <div class="card">
+            <h3>环境快速设置</h3>
+            <div class="alert alert-info">
+                <span></span>
+                <div>在宿主 Electron 的控制台 (DevTools Console) 执行下方卡片中的命令，即可完成环境切换。</div>
+            </div>
+            <div id="originGrid" class="setup-grid"></div>
+            <div class="manual-box">
+                <div class="manual-header">
+                    <span>手动复制完整脚本</span>
+                    <button id="copyFullCmd" class="copy-btn-link">复制原始命令</button>
+                </div>
+                <pre id="fullCmdPreview"></pre>
+            </div>
+        </div>
+        <div class="card">
+            <h3>当前组件配置</h3>
+            <div class="info-grid">
+                <div class="info-label">项目目录:</div>
+                <div class="info-value">
+                    <a href="${toVsCodeUrl(projectRoot)}" class="link-code" title="点击在 IDE 中打开"><code>${escapeHtml(projectRootDisplay)}</code></a>
+                </div>
+                <div class="info-label">配置文件:</div>
+                <div class="info-value">
+                    ${configFilePath ? `
+                        <a href="${toVsCodeUrl(configFilePath)}" class="link-code" title="点击在 IDE 中打开"><code>${escapeHtml(node_path.basename(configFilePath))}</code></a>
+                        ${annotatedConfigHtml ? `
+                            <details style="margin-top: 8px; border: none; padding: 0; background: transparent; box-shadow: none;">
+                                <summary style="font-size: 12px; color: var(--p); font-weight: 500;">查看配置源码与解析结果</summary>
+                                <pre style="margin-top: 8px; max-height: 400px; overflow: auto; background: #f1f5f9; border-color: #cbd5e1; font-size: 11px; padding: 12px; border-radius: 6px;">${annotatedConfigHtml}</pre>
+                            </details>
+                        ` : ''}
+                    ` : '<span class="muted">未找到</span>'}
+                </div>
+            </div>
+            ${!hasConfig || isWildcardOnly ? `
+                <div class="alert alert-info">
+                    <span></span>
+                    <div>
+                        <b>全局通配模式已启用</b>
+                        <div style="font-size: 13px; margin-top: 2px;">Map 中包含通配符 "*"。所有组件请求将默认加载入口。构建前请在 <code>vite.config.ts</code> 中显式指定组件映射。</div>
+                    </div>
+                </div>
+            ` : ''}
+            ${!defaultEntryExists ? `
+                <div class="alert alert-error">
+                    <span></span>
+                    <div>
+                        <b>默认入口文件缺失</b>
+                        <div style="font-size: 13px; margin-top: 2px;">找不到路径：<a href="${toVsCodeUrl(defaultEntryAbs)}" class="link-code"><code>${escapeHtml(getShortPath(defaultEntryAbs))}</code></a></div>
+                    </div>
+                </div>
+            ` : ''}
+            ${hasConfig ? `
+                <table>
+                    <thead><tr><th>组件名称 <small class="muted">(Component Name)</small></th><th>映射入口 <small class="muted">(Short Path)</small></th><th>包装地址 <small class="muted">(UMD Wrapper)</small></th></tr></thead>
+                    <tbody>
+                        ${Object.entries(resolvedDevComponentMap).map(([name, entry])=>{
+        const abs = entryPathMap[name];
+        const displayPath = abs ? getShortPath(abs) : entry;
+        const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to__/vue/loader/' + name + '.js';
+        const entryHtml = abs ? '<a href="' + toVsCodeUrl(abs) + '" class="link-code" title="点击在 IDE 中打开"><code>' + escapeHtml(displayPath) + '</code></a>' : '<code>' + escapeHtml(entry) + '</code>';
+        return '<tr><td><code class="code-name">' + name + "</code></td><td>" + entryHtml + '</td><td><div style="display: flex; align-items: center; gap: 6px;"><code style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;">' + escapeHtml(wrapperUrl) + '</code><button class="copy-wrapper-btn" data-url="' + wrapperUrl + '" style="padding: 2px 8px; font-size: 11px; border: 1px solid var(--b); background: #fff; border-radius: 4px; cursor: pointer; color: var(--t); transition: .2s;" title="复制包装地址">Copy</button></div></td></tr>';
+    }).join('')}
+                    </tbody>
+                </table>
+            ` : '<div class="alert alert-warning">未发现任何配置组件</div>'}
+            <details>
+                <summary>插件参数与配置说明 (Plugin API)</summary>
+                <div class="parameter-desc">
+                    <div style="margin-bottom: 24px;">
+                        <pre style="background: #f0fdf4; color: #166534; border-color: #bbf7d0; font-size: 14px; font-weight: 600;">devToVuePlugin(components?, options?)</pre>
+                        <div class="muted" style="margin-top: 8px;">
+                            支持单组件简写、对象全量映射，以及透传 Vite 原生配置。
+                        </div>
+                    </div>
+                    <div class="parameter-item">
+                        <span class="parameter-name">1. components (第一个参数)</span>
+                        <div class="parameter-info">
+                            定义组件名与本地入口文件的映射：
+                            <ul style="margin-top: 8px;">
+                                <li><b>单组件简写</b>：<code class="val">'Demo'</code> -> 自动关联 <code>{ Demo: '/' }</code>。</li>
+                                <li><b>通配符映射</b>：<code class="val">'*'</code> -> 匹配所有组件名。支持 <code class="val">'/'</code> (默认入口) 或具体的相对/绝对路径。</li>
+                                <li><b>多组件映射</b>：支持具体的相对/绝对路径。</li>
+                            </ul>
+                            <pre><span class="cmt">// Option 1: Shorthand (Default)</span>
+devToVuePlugin(<span class="str">'Demo'</span>)
+<span class="cmt">// Option 2: Explicit Mapping with Wildcard</span>
+devToVuePlugin({
+  <span class="str">'*'</span>: <span class="str">'/'</span>, <span class="cmt">// Wildcard to default entry</span>
+  <span class="str">'Card'</span>: <span class="str">'src/Card.vue'</span> <span class="cmt">// Specific file</span>
+})</pre>
+                            <div class="muted" style="font-size: 12px; margin-top: 8px; background: #fffbeb; padding: 8px 12px; border-radius: 6px; border: 1px solid #fef3c7; color: #92400e;">
+                                <b>关于默认入口 (/)</b>：表示使用工程默认入口文件。查找顺序：优先 <code>src/App.vue</code>，其次 <code>src/index.{vue,tsx,jsx}</code>。
+                            </div>
+                        </div>
+                    </div>
+                    <div class="parameter-item">
+                        <span class="parameter-name">2. options (第二个参数)</span>
+                        <div class="parameter-info">
+                            高级配置（深度合并）：
+                            <ul style="margin-top: 8px;">
+                                <li><code class="kw">css</code>:
+                                    <ul>
+                                        <li><b>默认值：</b><code>{ modules: { generateScopedName: <span class="str">'[name]__[local]___[hash:base64:5]'</span> } }</code>。</li>
+                                        <li>传 <code class="kw">false</code> 禁用配置；传对象则进行深度合并。</li>
+                                        <li>详细配置请参考 <a href="https://cn.vite.dev/config/shared-options#css-modules" target="_blank" style="color:#42b883;">Vite CSS 官方文档</a></li>
+                                    </ul>
+                                    <pre><span class="cmt">// Disable plugin CSS config or provide custom overrides</span>
+devToVuePlugin(<span class="str">'Demo'</span>, { css: <span class="kw">false</span> })
+devToVuePlugin(<span class="str">'Demo'</span>, { css: { ... } })</pre>
+                                </li>
+                                <li style="margin-top: 12px;"><code class="kw">build</code>:
+                                    <ul>
+                                        <li><b>仅在 lib 构建模式下生效</b>。内置默认值：</li>
+                                        <pre style="font-size: 11px; color: #4a5568;">formats: [<span class="str">'umd'</span>], fileName: <span class="str">'[name].js'</span>, inlineDynamicImports: <span class="kw">true</span>,
+external: [<span class="str">'vue'</span>],
+globals: { vue: <span class="str">'Vue'</span> }</pre>
+                                        <li>合并规则：用户配置覆盖默认项。</li>
+                                        <li>详细配置请参考 <a href="https://cn.vite.dev/config/build-options" target="_blank" style="color:#42b883;">Vite 构建官方文档</a></li>
+                                    </ul>
+                                    <pre><span class="cmt">// Example: Disable asset inlining during build</span>
+devToVuePlugin(<span class="str">'Demo'</span>, {
+  build: { assetsInlineLimit: <span class="val">0</span> }
+})</pre>
+                                </li>
+                                <li style="margin-top: 12px;"><code class="kw">open</code>:
+                                    <ul>
+                                        <li><b>默认值：</b><code class="kw">false</code>。</li>
+                                        <li>是否在启动 Vite 开发服务器后自动在浏览器中打开此调试面板。</li>
+                                    </ul>
+                                    <pre><span class="cmt">// Enable auto-open</span>
+devToVuePlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true</span> })</pre>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </details>
+        </div>
+        <div class="card">
+            <h3>UMD 动态包装器 (Auto-Generated Wrapper)</h3>
+            <p class="muted">无需额外配置，每个组件都自动生成一个轻量级 UMD 包装器，可直接在无 Vue 框架支持的宿主环境中使用。</p>
+            <div class="info-grid">
+                <div class="info-label">端点:</div>
+                <div class="info-value"><code>/__dev_to__/vue/loader/{ComponentName}.js</code></div>
+                <div class="info-label">作用:</div>
+                <div class="info-value">自动将组件导出为 Vue 组件实例，无需宿主集成 @dev-to/vue-loader</div>
+                <div class="info-label">依赖:</div>
+                <div class="info-value"><code>vue@3</code> (CDN 或本地)</div>
+            </div>
+            <details>
+                <summary>包装器工作原理与集成示例</summary>
+                <div style="margin-top: 12px;">
+                    <h4 style="color: var(--t); font-size: 14px; margin-top: 0; margin-bottom: 8px;">什么是包装器？</h4>
+                    <p class="muted" style="margin-bottom: 12px;">
+                        包装器是一个自动生成的 UMD 模块，它包装了原始的 render 函数并导出为 Vue 组件。
+                        这样，无论宿主是否集成了 VueLoader，都能直接作为 Vue 组件使用。
+                    </p>
+                    <h4 style="color: var(--t); font-size: 14px; margin-top: 16px; margin-bottom: 8px;">集成方式</h4>
+                    <pre style="font-size: 12px; line-height: 1.7;">
+<span class="cmt">// 1. 加载 Vue</span>
+<span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"https://unpkg.com/vue@3/dist/vue.global.prod.js"</span> <span class="kw">&lt;/script&gt;</span>
+<span class="cmt">// 2. 加载包装器脚本</span>
+<span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"\${originCandidates[0] || 'http://localhost:5173'}/__dev_to__/vue/loader/{ComponentName}.js"</span> <span class="kw">&lt;/script&gt;</span>
+<span class="cmt">// 3. 直接作为 Vue 组件使用</span>
+<span class="kw">const</span> app = Vue.createApp(window.ComponentName);
+app.mount(<span class="str">'#app'</span>);
+<span class="cmt">// 或在宿主 Vue 应用中使用</span>
+<span class="kw">const</span> Component = window.ComponentName;
+app.component(<span class="str">'MyComponent'</span>, Component);</pre>
+                    <h4 style="color: var(--t); font-size: 14px; margin-top: 16px; margin-bottom: 8px;">关键特性</h4>
+                    <ul class="muted" style="margin: 8px 0; padding-left: 20px;">
+                        <li><b>零配置</b>：自动为每个组件生成包装器，无需手动编写</li>
+                        <li><b>兼容现有宿主</b>：支持 CommonJS、AMD、浏览器全局三种模式</li>
+                        <li><b>自动依赖管理</b>：若未加载 Vue，包装器会自动从 CDN 加载（可配置）</li>
+                        <li><b>轻量级</b>：仅包含加载逻辑，核心渲染由 VueLoader 负责</li>
+                    </ul>
+                </div>
+            </details>
+        </div>
+        <div class="card">
+            <h3>构建与部署</h3>
+            <p class="muted">执行 <code>dev-to build</code>（等价于 <code>vite build --mode lib</code>）将组件打包为 UMD 格式以供发布。</p>
+            <div class="build-grid">
+                <div class="build-card">
+                    <div style="font-weight:600; font-size:13px; margin-bottom:8px; color: var(--t);">输出结构 (Output)</div>
+                    <pre style="margin:0; padding:0; background:transparent; border:none; font-size:12px; color:#4a5568;">
+JS:  <span class="str">dist/&lt;name&gt;/&lt;name&gt;.js</span>
+CSS: <span class="str">dist/&lt;name&gt;/&lt;name&gt;.css</span></pre>
+                </div>
+                <div class="build-card">
+                    <div style="font-weight:600; font-size:13px; margin-bottom:8px; color: var(--t);">外部依赖 (External)</div>
+                    <pre style="margin:0; padding:0; background:transparent; border:none; font-size:12px; color:#4a5568;">
+<span class="kw">vue</span> -> <span class="val">Vue</span></pre>
+                </div>
+            </div>
+            <details>
+                <summary>构建导出 (Export) 智能分析逻辑</summary>
+                <div style="margin-top: 12px; font-size: 13px;">
+                    <p class="muted">插件会使用 AST 分析入口文件，确保 UMD 包具备正确的导出：</p>
+                    <ul class="muted" style="line-height: 1.8;">
+                        <li>如果有 <code>export default</code>，直接作为组件入口。</li>
+                        <li>如果没有 Default 但只有一个命名导出，自动将其关联为 Default。</li>
+                        <li>如果有多个命名导出，必须有一个与 <code>componentName</code> 同名，否则会报错提醒。</li>
+                    </ul>
+                </div>
+            </details>
+        </div>
+        <div class="card">
+            <h3>运行指标 & 参考</h3>
+            <div class="stats-grid">
+                <div class="stat-card"><div class="value">${stats.contract.count}</div><div class="label">Contract 请求</div></div>
+                <div class="stat-card"><div class="value">${stats.init.count}</div><div class="label">Init 注入</div></div>
+                <div class="stat-card"><div class="value">${stats.runtime.count}</div><div class="label">Runtime 加载</div></div>
+            </div>
+            <details>
+                <summary>技术端点与 HMR 事件 (Internal Reference)</summary>
+                <div style="margin-top: 12px;">
+                    <pre style="font-size: 12px; line-height: 1.7;">
+<span class="kw">Endpoints:</span>
+- Contract: <span class="str">${STABLE_CONTRACT_PATH}</span>
+- Init:     <span class="str">${STABLE_INIT_PATH}</span>
+- Runtime:  <span class="str">${STABLE_VUE_RUNTIME_PATH}</span>
+<span class="kw">HMR Events:</span>
+- Reload:   <span class="val">${EVENT_FULL_RELOAD}</span>
+- Update:   <span class="val">${EVENT_HMR_UPDATE}</span></pre>
+                    <p class="muted" style="font-size: 12px; margin-top: 12px; background: #fffbeb; padding: 10px 14px; border-radius: 6px; border: 1px solid #fef3c7; color: #92400e;">
+                        <b>重要提示：</b>在 Electron 环境下，静态资源必须通过 <code>import</code> 引入才能被桥接插件正确拦截和路径重写。
+                    </p>
+                </div>
+            </details>
+        </div>
+        <div style="text-align: center; margin-top: 32px; padding-bottom: 24px;">
+            <a href="${STABLE_DEBUG_JSON_PATH}" target="_blank" style="font-size: 13px; color: #42b883; text-decoration: none; font-weight: 500;">查看原始协议 JSON 数据 -></a>
+        </div>
+    </div>
+    <script>
+        (function() {
+            const serverOrigins = ${JSON.stringify(originCandidates)};
+            const current = location.origin;
+            const origins = [...serverOrigins];
+            // 确保当前访问地址也在候选列表中
+            if (!origins.includes(current)) origins.unshift(current);
+            const seen = new Set();
+            const uniqueOrigins = origins.filter(o => {
+                if (seen.has(o)) return false;
+                seen.add(o);
+                return true;
+            });
+            const grid = document.getElementById('originGrid');
+            const fullCmdPreview = document.getElementById('fullCmdPreview');
+            const copyFullBtn = document.getElementById('copyFullCmd');
+            function makeCmd(origin) {
+                return "localStorage.setItem('VITE_DEV_SERVER_ORIGIN', '" + origin + "'); location.reload();";
+            }
+            function selectOrigin(origin, card) {
+                // 更新卡片激活状态
+                document.querySelectorAll('.setup-card').forEach(c => c.classList.remove('active'));
+                if (card) card.classList.add('active');
+                // 更新下方预览脚本
+                fullCmdPreview.textContent = makeCmd(origin);
+            }
+            function copy(text, successCb) {
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                document.body.removeChild(ta);
+                if (successCb) successCb();
+            }
+            uniqueOrigins.forEach(origin => {
+                const isLocal = origin.includes('localhost') || origin.includes('127.0.0.1');
+                const displayUrl = origin.indexOf('://') > -1 ? origin.split('://')[1] : origin;
+                const card = document.createElement('div');
+                card.className = 'setup-card' + (origin === current ? ' active' : '');
+                card.innerHTML =
+                    '<span class="type">' + (isLocal ? '本地回路 (Local)' : '局域网 (LAN)') + '</span>' +
+                    '<span class="url">' + displayUrl + '</span>' +
+                    '<div class="action">点击复制切换命令</div>';
+                card.onclick = () => {
+                    selectOrigin(origin, card);
+                    copy(makeCmd(origin), () => {
+                        const actionEl = card.querySelector('.action');
+                        const originalAction = actionEl.innerHTML;
+                        actionEl.innerHTML = '<span>OK</span> 命令已复制成功';
+                        card.style.borderColor = '#10b981';
+                        setTimeout(() => {
+                            actionEl.innerHTML = originalAction;
+                            card.style.borderColor = '';
+                        }, 2000);
+                    });
+                };
+                grid.appendChild(card);
+            });
+            selectOrigin(current, null); // 初始化预览
+            copyFullBtn.onclick = () => copy(fullCmdPreview.textContent, () => {
+                copyFullBtn.textContent = 'OK 已成功复制';
+                setTimeout(() => { copyFullBtn.textContent = '复制原始命令'; }, 2000);
+            });
+            // 绑定包装地址复制按钮事件
+            document.querySelectorAll('.copy-wrapper-btn').forEach(btn => {
+                btn.onclick = (e) => {
+                    e.preventDefault();
+                    const url = btn.getAttribute('data-url');
+                    copy(url, () => {
+                        const originalText = btn.textContent;
+                        btn.textContent = 'OK';
+                        btn.style.borderColor = '#10b981';
+                        btn.style.color = '#10b981';
+                        setTimeout(() => {
+                            btn.textContent = originalText;
+                            btn.style.borderColor = '';
+                            btn.style.color = '';
+                        }, 1500);
+                    });
+                };
+                btn.onmouseover = () => { btn.style.borderColor = 'var(--p)'; btn.style.color = 'var(--p)'; };
+                btn.onmouseout = () => { btn.style.borderColor = ''; btn.style.color = ''; };
+            });
+            const serverActualPort = ${'number' == typeof actualPort ? actualPort : 'null'};
+            document.getElementById('actualPortDisplay').textContent = serverActualPort || location.port || '-';
+        })();
+    </script>
+</body>
+</html>`;
+}
 function getLanIPv4Hosts() {
     const nets = node_os.networkInterfaces();
     const out = new Set();
@@ -26,6 +551,574 @@ function getLanIPv4Hosts() {
     }
     return Array.from(out);
 }
+function toFsPathFromViteEntry(entry) {
+    if (!entry.startsWith('/@fs')) return null;
+    let p = entry.slice(4);
+    if (p.startsWith('/') && /\/[A-Za-z]:\//.test(p)) p = p.slice(1);
+    return p;
+}
+function tryResolveWithExtensions(p) {
+    const exts = [
+        '.vue',
+        '.tsx',
+        '.jsx',
+        '.ts',
+        '.js'
+    ];
+    if (node_fs.existsSync(p)) return p;
+    const parsed = node_path.parse(p);
+    if (parsed.ext) for (const ext of exts){
+        const cand = node_path.join(parsed.dir, `${parsed.name}${ext}`);
+        if (node_fs.existsSync(cand)) return cand;
+    }
+    else for (const ext of exts){
+        const cand = `${p}${ext}`;
+        if (node_fs.existsSync(cand)) return cand;
+    }
+    return null;
+}
+function resolveEntryAbsPath(rootDir, entry, defaultEntryAbs, fallbackRoot) {
+    const tryResolveWithBase = (baseDir)=>{
+        if ('/' === entry) {
+            if (!defaultEntryAbs) throw new Error(`${PLUGIN_LOG_PREFIX} defaultEntryAbs is required when entry is '/'`);
+            return defaultEntryAbs;
+        }
+        const fsPath = toFsPathFromViteEntry(entry);
+        if (fsPath) return tryResolveWithExtensions(fsPath);
+        if (node_path.isAbsolute(entry)) return tryResolveWithExtensions(entry);
+        if (entry.startsWith('/')) {
+            const maybe = node_path.resolve(baseDir, entry.slice(1));
+            return tryResolveWithExtensions(maybe);
+        }
+        const rel = node_path.resolve(baseDir, entry);
+        return tryResolveWithExtensions(rel);
+    };
+    const resolved = tryResolveWithBase(rootDir);
+    if (resolved) return resolved;
+    if (fallbackRoot && fallbackRoot !== rootDir) return tryResolveWithBase(fallbackRoot);
+    return resolved;
+}
+function isLibBuild(env) {
+    return env?.command === 'build' && env?.mode === 'lib';
+}
+function toSafeOutDirName(componentName) {
+    return componentName.replace(/[\\/]/g, '_').replace(/\.\./g, '_');
+}
+function toSafeUmdName(componentName) {
+    let s = componentName.replace(/[^A-Za-z0-9_$]+/g, '_');
+    if (!s) s = 'ViteDevComponent';
+    if (/^\d/.test(s)) s = `_${s}`;
+    return s;
+}
+function isValidJsIdentifier(name) {
+    return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
+}
+function analyzeExports(filePath) {
+    if (!node_fs.existsSync(filePath)) return {
+        hasDefault: false,
+        namedExports: []
+    };
+    const content = node_fs.readFileSync(filePath, 'utf-8');
+    const namedExports = [];
+    let hasDefault = false;
+    const ext = node_path.extname(filePath).toLowerCase();
+    if ('.vue' === ext) {
+        hasDefault = true;
+        const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/);
+        if (scriptMatch) {
+            const scriptContent = scriptMatch[1];
+            const namedRegex = /export\s+(?:const|let|var|function|class)\s+([A-Za-z_$][A-Za-z0-9_$]*)/g;
+            let match;
+            while(null !== (match = namedRegex.exec(scriptContent)))namedExports.push(match[1]);
+        }
+        return {
+            hasDefault,
+            namedExports
+        };
+    }
+    let scriptKind = typescript.ScriptKind.TS;
+    if ('.tsx' === ext) scriptKind = typescript.ScriptKind.TSX;
+    else if ('.jsx' === ext) scriptKind = typescript.ScriptKind.JSX;
+    else if ('.js' === ext) scriptKind = typescript.ScriptKind.JS;
+    else if ('.ts' === ext) scriptKind = typescript.ScriptKind.TS;
+    let sourceFile;
+    try {
+        sourceFile = typescript.createSourceFile(filePath, content, typescript.ScriptTarget.Latest, true, scriptKind);
+    } catch (parseError) {
+        throw new Error(`${PLUGIN_LOG_PREFIX} 无法解析入口文件 "${filePath}"。\n解析错误: ${parseError instanceof Error ? parseError.message : String(parseError)}\n请确保文件是有效的 TypeScript/JavaScript 文件。`);
+    }
+    typescript.getPreEmitDiagnostics(typescript.createProgram([
+        filePath
+    ], {
+        target: typescript.ScriptTarget.Latest,
+        module: typescript.ModuleKind.ESNext,
+        jsx: scriptKind === typescript.ScriptKind.TSX || scriptKind === typescript.ScriptKind.JSX ? typescript.JsxEmit.React : void 0
+    }));
+    function visit(node) {
+        if (typescript.isExportAssignment(node)) {
+            if (true !== node.isExportEquals) hasDefault = true;
+        }
+        if (typescript.isFunctionDeclaration(node) || typescript.isClassDeclaration(node) || typescript.isVariableStatement(node) || typescript.isInterfaceDeclaration(node) || typescript.isTypeAliasDeclaration(node) || typescript.isEnumDeclaration(node)) {
+            const modifiers = typescript.getModifiers(node);
+            if (modifiers?.some((m)=>m.kind === typescript.SyntaxKind.ExportKeyword)) if (modifiers.some((m)=>m.kind === typescript.SyntaxKind.DefaultKeyword)) hasDefault = true;
+            else {
+                if (typescript.isFunctionDeclaration(node) && node.name) namedExports.push(node.name.text);
+                if (typescript.isClassDeclaration(node) && node.name) namedExports.push(node.name.text);
+                if (typescript.isVariableStatement(node)) node.declarationList.declarations.forEach((decl)=>{
+                    if (typescript.isIdentifier(decl.name)) namedExports.push(decl.name.text);
+                });
+                if (typescript.isInterfaceDeclaration(node) && node.name) namedExports.push(node.name.text);
+                if (typescript.isTypeAliasDeclaration(node) && node.name) namedExports.push(node.name.text);
+                if (typescript.isEnumDeclaration(node) && node.name) namedExports.push(node.name.text);
+            }
+        }
+        if (typescript.isExportDeclaration(node) && node.exportClause) {
+            if (typescript.isNamedExports(node.exportClause)) node.exportClause.elements.forEach((element)=>{
+                if (element.name) {
+                    const exportName = element.name.text;
+                    const { propertyName } = element;
+                    if (propertyName && 'default' === propertyName.text) namedExports.push(exportName);
+                    else if ('default' === exportName) hasDefault = true;
+                    else namedExports.push(exportName);
+                }
+            });
+            else if (typescript.isNamespaceExport(node.exportClause)) namedExports.push(node.exportClause.name.text);
+        }
+        typescript.isExportDeclaration(node) && node.exportClause;
+        typescript.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    const uniqueExports = Array.from(new Set(namedExports));
+    if (!hasDefault && 0 === uniqueExports.length) {
+        const hasDefaultRegex = /export\s+default\s+/;
+        const hasNamedRegex = /export\s+(?:const|let|var|function|class|interface|type|enum)\s+([A-Za-z_$][A-Za-z0-9_$]*)/g;
+        const regexHasDefault = hasDefaultRegex.test(content);
+        const regexNamedMatches = [];
+        let match;
+        while(null !== (match = hasNamedRegex.exec(content)))regexNamedMatches.push(match[1]);
+        if (regexHasDefault || regexNamedMatches.length > 0) {
+            console.warn(`${PLUGIN_LOG_PREFIX} 警告：AST 分析未检测到导出，但正则检测到：\n  文件: ${filePath}\n  正则检测 default: ${regexHasDefault}\n  正则检测命名导出: ${regexNamedMatches.join(', ') || '无'}\n  这可能是 AST 解析问题，将尝试继续构建。`);
+            if (regexHasDefault) hasDefault = true;
+            if (regexNamedMatches.length > 0) namedExports.push(...regexNamedMatches);
+        }
+    }
+    return {
+        hasDefault,
+        namedExports: Array.from(new Set(namedExports))
+    };
+}
+function generateLibVirtualEntryCode(params) {
+    const { defaultEntryAbs, componentName } = params;
+    if (!node_fs.existsSync(defaultEntryAbs)) throw new Error(`${PLUGIN_LOG_PREFIX} 入口文件不存在: "${defaultEntryAbs}"\n请检查文件路径是否正确。`);
+    const actualFile = tryResolveWithExtensions(defaultEntryAbs) || defaultEntryAbs;
+    if (!node_fs.existsSync(actualFile)) throw new Error(`${PLUGIN_LOG_PREFIX} 入口文件不存在: "${defaultEntryAbs}"\n尝试解析后的路径: "${actualFile}"\n请检查文件路径是否正确。`);
+    const importTarget = actualFile;
+    let exports;
+    try {
+        exports = analyzeExports(actualFile);
+    } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        throw new Error(`${PLUGIN_LOG_PREFIX} 分析入口文件 "${actualFile}" 的导出时出错：\n${errorMsg}\n\n请检查文件：\n  1. 文件是否存在且可读\n  2. 文件是否有语法错误\n  3. 文件是否有导出（export default 或命名导出）\n\n原始路径: "${defaultEntryAbs}"\n实际解析路径: "${actualFile}"`);
+    }
+    let code;
+    if (exports.hasDefault || 0 !== exports.namedExports.length) if (exports.hasDefault) {
+        let prefer = '';
+        if (exports.namedExports.includes(componentName)) prefer = isValidJsIdentifier(componentName) ? `mod.${componentName}` : `mod[${JSON.stringify(componentName)}]`;
+        const pickedExpr = prefer ? `${prefer} || mod.default || mod` : 'mod.default || mod';
+        code = `/** AUTO-GENERATED by ${PLUGIN_NAME} */
+import * as mod from ${JSON.stringify(importTarget)};
+const picked = ${pickedExpr};
+const Component = picked && picked.default ? picked.default : picked;
+export default Component;
+export * from ${JSON.stringify(importTarget)};
+`;
+    } else if (1 === exports.namedExports.length) {
+        const singleExport = exports.namedExports[0];
+        const exportAccess = isValidJsIdentifier(singleExport) ? `mod.${singleExport}` : `mod[${JSON.stringify(singleExport)}]`;
+        code = `/** AUTO-GENERATED by ${PLUGIN_NAME} */
+import * as mod from ${JSON.stringify(importTarget)};
+const Component = ${exportAccess};
+export default Component;
+export * from ${JSON.stringify(importTarget)};
+`;
+    } else {
+        const hasComponentNameExport = exports.namedExports.some((exp)=>exp === componentName);
+        if (hasComponentNameExport) {
+            const exportAccess = isValidJsIdentifier(componentName) ? `mod.${componentName}` : `mod[${JSON.stringify(componentName)}]`;
+            code = `/** AUTO-GENERATED by ${PLUGIN_NAME} */
+import * as mod from ${JSON.stringify(importTarget)};
+const Component = ${exportAccess};
+export default Component;
+export * from ${JSON.stringify(importTarget)};
+`;
+        } else throw new Error(`${PLUGIN_LOG_PREFIX} Entry file "${defaultEntryAbs}" has multiple named exports (${exports.namedExports.join(', ')}), but none match componentName "${componentName}".\n\nPlease resolve this by:\n\n  1. Adding a default export (Recommended for Vue):\n     export default defineComponent({ name: '${componentName}', ... })\n\n  2. Adding a named export called "${componentName}":\n     export const ${componentName} = defineComponent({ ... })\n\n  3. Keeping only one named export (it will be used automatically).\n\nCurrent componentName: "${componentName}"\nCurrent named exports: ${exports.namedExports.join(', ')}`);
+    }
+    else throw new Error(`${PLUGIN_LOG_PREFIX} Entry file "${defaultEntryAbs}" does not have any exports.\n\nPlease ensure the file has one of the following:\n\n  1. export default (Recommended for Vue SFC):\n     <script setup>\n     // Your component logic\n     </script>\n     or\n     export default defineComponent({ ... })\n\n  2. Named export matching componentName:\n     export const ${componentName} = defineComponent({ ... })\n\n  3. A single named export (any name):\n     export const MyComponent = defineComponent({ ... })\n     // If there is only one named export, it will be used automatically.\n\nCurrent componentName: "${componentName}"`);
+    return code;
+}
+function getLibVirtualEntryPath(componentName) {
+    return `virtual:${PLUGIN_NAME}-lib-entry:${componentName}`;
+}
+function normalizeLibCss(outDir, baseName) {
+    if (!node_fs.existsSync(outDir)) return;
+    const target = node_path.join(outDir, `${baseName}.css`);
+    if (node_fs.existsSync(target)) return;
+    const cssCandidates = [];
+    const scanDir = (dir, depth)=>{
+        if (depth < 0 || !node_fs.existsSync(dir)) return;
+        const entries = node_fs.readdirSync(dir, {
+            withFileTypes: true
+        });
+        for (const e of entries){
+            const full = node_path.join(dir, e.name);
+            if (e.isDirectory()) scanDir(full, depth - 1);
+            else if (e.isFile() && e.name.endsWith('.css')) cssCandidates.push(full);
+        }
+    };
+    scanDir(outDir, 2);
+    if (1 !== cssCandidates.length) return;
+    const from = cssCandidates[0];
+    try {
+        node_fs.renameSync(from, target);
+    } catch  {
+        try {
+            node_fs.copyFileSync(from, target);
+            node_fs.unlinkSync(from);
+        } catch  {}
+    }
+}
+function resolveBuildTargets(params) {
+    const { componentMap, requestedRaw, defaultEntryAbs } = params;
+    const componentNames = Object.keys(componentMap);
+    const requestedList = requestedRaw ? requestedRaw.split(',').map((s)=>s.trim()).filter(Boolean) : [];
+    const actualConfiguredNames = componentNames.filter((n)=>'*' !== n);
+    if (actualConfiguredNames.length > 0) {
+        if (requestedList.length > 0) {
+            const picked = requestedList.filter((n)=>actualConfiguredNames.includes(n));
+            if (0 === picked.length) throw new Error(`${PLUGIN_LOG_PREFIX} 指定的 component 不在配置列表中：${requestedRaw}`);
+            return picked;
+        }
+        return actualConfiguredNames;
+    }
+    if (requestedList.length > 0) return requestedList;
+    const fallbackName = node_path.parse(defaultEntryAbs || 'index').name || 'index';
+    return [
+        fallbackName
+    ];
+}
+function generateLibBuildNextConfig(params) {
+    const { rootDir, picked, componentMap, resolvedConfig, options, userConfig, configDir } = params;
+    const outBase = toSafeOutDirName(picked);
+    const outDir = node_path.resolve(rootDir, 'dist', outBase);
+    let resolvedEntryAbs = resolvedConfig.defaultEntryAbs;
+    const entryAbs = (()=>{
+        const entryFromMap = componentMap[picked];
+        if (entryFromMap) {
+            const abs = resolveEntryAbsPath(rootDir, entryFromMap, resolvedConfig.defaultEntryAbs, configDir);
+            if (!abs) throw new Error(`${PLUGIN_LOG_PREFIX} 无法解析入口：component="${picked}", entry="${entryFromMap}"`);
+            resolvedEntryAbs = abs;
+        }
+        return getLibVirtualEntryPath(picked);
+    })();
+    const virtualEntryCode = (()=>{
+        const entryFromMap = componentMap[picked];
+        if (entryFromMap) {
+            const abs = resolveEntryAbsPath(rootDir, entryFromMap, resolvedConfig.defaultEntryAbs, configDir);
+            if (!abs) throw new Error(`${PLUGIN_LOG_PREFIX} 无法解析入口：component="${picked}", entry="${entryFromMap}"`);
+            resolvedEntryAbs = abs;
+            return generateLibVirtualEntryCode({
+                rootDir,
+                defaultEntryAbs: abs,
+                componentName: picked
+            });
+        }
+        resolvedEntryAbs = resolvedConfig.defaultEntryAbs;
+        return generateLibVirtualEntryCode({
+            rootDir,
+            defaultEntryAbs: resolvedConfig.defaultEntryAbs,
+            componentName: picked
+        });
+    })();
+    const next = {
+        root: rootDir,
+        define: {
+            ...userConfig.define || {},
+            'process.env.NODE_ENV': JSON.stringify('production')
+        },
+        build: {
+            outDir,
+            emptyOutDir: true,
+            cssCodeSplit: false,
+            lib: {
+                entry: entryAbs,
+                name: toSafeUmdName(picked),
+                formats: [
+                    'umd'
+                ],
+                fileName: ()=>`${outBase}.js`
+            },
+            rollupOptions: {
+                external: [
+                    'vue'
+                ],
+                output: {
+                    inlineDynamicImports: true,
+                    exports: 'named',
+                    globals: {
+                        vue: 'Vue'
+                    },
+                    assetFileNames: (assetInfo)=>{
+                        const name = assetInfo?.name || '';
+                        if (name.endsWith('.css')) return `${outBase}.css`;
+                        return 'assets/[name]-[hash][extname]';
+                    }
+                }
+            }
+        }
+    };
+    if (options.build) {
+        const merged = mergeConfig({
+            build: next.build
+        }, {
+            build: options.build
+        });
+        next.build = merged.build;
+    }
+    return {
+        next,
+        outDir: next.build?.outDir || outDir,
+        outBase,
+        buildTargets: [],
+        virtualEntryCode,
+        resolvedEntryAbs
+    };
+}
+function createLoaderUmdWrapper(options) {
+    const { componentName, origin, contractEndpoint = STABLE_CONTRACT_PATH, vueLoaderUrl = 'https://cdn.jsdelivr.net/npm/@dev-to/vue-loader@latest/dist/index.umd.js' } = options;
+    const globalName = toSafeUmdName(componentName);
+    const code = `/**
+ * UMD Loader Wrapper for component: ${componentName}
+ * Global name: ${globalName}
+ * Generated by ${PLUGIN_LOG_PREFIX}
+ *
+ * This wrapper automatically exports a Vue component that can be used in any Vue environment.
+ * No need to manually integrate @dev-to/vue-loader.
+ *
+ * ============= Quick Start =============
+ *
+ * 1. Load Vue:
+ *    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+ *
+ * 2. Load this wrapper:
+ *    <script src="${origin}/__dev_to__/vue/loader/${componentName}.js"></script>
+ *
+ * 3. Use as a Vue component:
+ *
+ *    // Option A: Direct Vue rendering
+ *    const Component = window.${globalName};
+ *    const app = Vue.createApp(Component);
+ *    app.mount('#app');
+ *
+ *    // Option B: Register as a component in an existing app
+ *    const app = Vue.createApp({});
+ *    app.component('${componentName}', window.${globalName});
+ *    app.mount('#app');
+ *
+ *    // Option C: Direct function call (legacy compatibility)
+ *    window.${globalName}(document.getElementById('app'), { prop1: 'value1' })
+ *      .then(app => console.log('Rendered'))
+ *      .catch(err => console.error('Error:', err));
+ *
+ * ============= Features =============
+ * ✓ Zero configuration required
+ * ✓ Automatic Vue detection
+ * ✓ Supports CommonJS, AMD, and global scope
+ * ✓ Auto-loads VueLoader from CDN if needed
+ * ✓ Works in any Vue 3 environment
+ *
+ * Note: Make sure Vue 3 is available globally.
+ */
+(function (root, factory) {
+  if (typeof exports === 'object' && typeof module !== 'undefined') {
+    // CommonJS
+    factory(exports, require('vue'), require('@dev-to/vue-loader'));
+  } else if (typeof define === 'function' && define.amd) {
+    // AMD
+    define(['exports', 'vue', '@dev-to/vue-loader'], factory);
+  } else {
+    // Browser globals
+    var globalObj = typeof globalThis !== 'undefined' ? globalThis : (typeof self !== 'undefined' ? self : root);
+    var tempExports = {};
+    factory(tempExports, globalObj.Vue, globalObj.DevToVueLoader);
+    globalObj.${globalName} = tempExports.default;
+  }
+})(this, function (exports, Vue, VueLoaderModule) {
+  'use strict';
+  var VueLoader = null;
+  var loadingPromise = null;
+  // Helper function to load a script dynamically
+  function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+      var script = document.createElement('script');
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+  // Helper function to ensure VueLoader is loaded
+  function ensureVueLoaderLoaded() {
+    if (VueLoader) {
+      return Promise.resolve();
+    }
+    if (!loadingPromise) {
+      loadingPromise = (function() {
+        // First, try to get VueLoader from the global scope
+        if (typeof window !== 'undefined' && window.DevToVueLoader && window.DevToVueLoader.VueLoader) {
+          VueLoader = window.DevToVueLoader.VueLoader;
+          return Promise.resolve();
+        }
+        // If not available, load it from URL
+        console.log('${PLUGIN_LOG_PREFIX} Loading @dev-to/vue-loader...');
+        return loadScript(${JSON.stringify(vueLoaderUrl)})
+          .then(function() {
+            if (typeof window !== 'undefined' && window.DevToVueLoader && window.DevToVueLoader.VueLoader) {
+              VueLoader = window.DevToVueLoader.VueLoader;
+              console.log('${PLUGIN_LOG_PREFIX} VueLoader loaded successfully');
+            } else {
+              throw new Error('${PLUGIN_LOG_PREFIX} VueLoader not found after loading');
+            }
+          })
+          .catch(function(error) {
+            console.error('${PLUGIN_LOG_PREFIX} Failed to load VueLoader:', error);
+            throw error;
+          });
+      })();
+    }
+    return loadingPromise;
+  }
+  // Try to get VueLoader from the module if available
+  if (VueLoaderModule && VueLoaderModule.VueLoader) {
+    VueLoader = VueLoaderModule.VueLoader;
+  }
+  // Component configuration
+  var config = {
+    origin: ${JSON.stringify(origin)},
+    name: ${JSON.stringify(componentName)},
+    contractEndpoint: ${JSON.stringify(contractEndpoint)}
+  };
+  /**
+   * Render the component using VueLoader
+   */
+  function render(targetElement, componentProps) {
+    if (!targetElement) {
+      throw new Error('${PLUGIN_LOG_PREFIX} Target element is required');
+    }
+    if (!Vue || !Vue.createApp) {
+      throw new Error('${PLUGIN_LOG_PREFIX} Vue 3 is not loaded');
+    }
+    // Ensure VueLoader is available before rendering
+    return ensureVueLoaderLoaded().then(function() {
+      if (!VueLoader) {
+        throw new Error('${PLUGIN_LOG_PREFIX} VueLoader initialization failed');
+      }
+      // Create VueLoader component props
+      var loaderProps = {
+        origin: config.origin,
+        name: config.name,
+        contractEndpoint: config.contractEndpoint,
+        componentProps: componentProps || {}
+      };
+      // Create a wrapper component that uses VueLoader
+      var WrapperComponent = {
+        name: '${componentName}Wrapper',
+        setup: function() {
+          return function() {
+            return Vue.h(VueLoader, loaderProps);
+          };
+        }
+      };
+      // Render using Vue
+      var app = Vue.createApp(WrapperComponent);
+      app.mount(targetElement);
+      return app;
+    });
+  }
+  // Create a Vue component wrapper for the render function
+  var ComponentWrapper = {
+    name: '${componentName}',
+    props: {
+      componentProps: {
+        type: Object,
+        default: function() { return {}; }
+      }
+    },
+    setup: function(props) {
+      var containerRef = Vue.ref(null);
+      var isFirstRender = Vue.ref(true);
+      Vue.onMounted(function() {
+        if (!containerRef.value) return;
+        render(containerRef.value, props.componentProps).catch(function(err) {
+          console.error('${PLUGIN_LOG_PREFIX} Failed to render ${componentName}:', err);
+          console.error('${PLUGIN_LOG_PREFIX} Props:', props.componentProps);
+        });
+        if (isFirstRender.value) {
+          isFirstRender.value = false;
+          if (typeof console !== 'undefined' && console.info) {
+            console.info(
+              '%c${PLUGIN_LOG_PREFIX}%c Successfully loaded and rendered component: %c${componentName}',
+              'color: #42b883; font-weight: bold;',
+              'color: #64748b;',
+              'color: #42b883; font-weight: bold;'
+            );
+          }
+        }
+      });
+      Vue.watch(function() { return props.componentProps; }, function(newProps) {
+        if (containerRef.value) {
+          // Re-render with new props
+          containerRef.value.innerHTML = '';
+          render(containerRef.value, newProps).catch(function(err) {
+            console.error('${PLUGIN_LOG_PREFIX} Failed to re-render ${componentName}:', err);
+          });
+        }
+      }, { deep: true });
+      return function() {
+        return Vue.h('div', { ref: containerRef });
+      };
+    }
+  };
+  // Also allow direct function call for backwards compatibility
+  ComponentWrapper.render = render;
+  // Export the API
+  exports.default = ComponentWrapper;
+});
+`;
+    return code;
+}
 function openBrowser(url) {
     const bridgePath = STABLE_DEBUG_HTML_PATH;
     if ('darwin' === process.platform) {
@@ -88,6 +1181,27 @@ function openBrowser(url) {
     if ('win32' === process.platform) return void exec(`start "" "${url}"`);
     exec(`xdg-open "${url}"`);
 }
+function getVueLoaderUmdPath() {
+    const require = createRequire(import.meta.url);
+    try {
+        const loaderPkgPath = require.resolve('@dev-to/vue-loader/package.json');
+        const loaderPkgDir = node_path.dirname(loaderPkgPath);
+        const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
+        if (node_fs.existsSync(umdPath)) return umdPath;
+    } catch  {}
+    try {
+        const loaderMainPath = require.resolve('@dev-to/vue-loader');
+        const loaderPkgDir = node_path.dirname(node_path.dirname(loaderMainPath));
+        const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
+        if (node_fs.existsSync(umdPath)) return umdPath;
+    } catch  {}
+    try {
+        const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
+        const umdPath = node_path.resolve(__dirname, '../../vue-loader/dist/index.umd.js');
+        if (node_fs.existsSync(umdPath)) return umdPath;
+    } catch  {}
+    return null;
+}
 const globalState = globalThis;
 let didOpenBrowser = Boolean(globalState[DEV_TO_VUE_DID_OPEN_BROWSER_KEY]);
 function installDebugTools(server, ctx, state) {
@@ -223,6 +1337,8 @@ function installDebugTools(server, ctx, state) {
             ];
             const originCandidates = candidateHosts.map((h)=>`${proto}://${h}${actualPort ? `:${actualPort}` : ''}`);
             const requestOrigin = hostHeader ? `${proto}://${hostHeader}` : originCandidates[0];
+            const componentNames = Object.keys(ctx.contract?.dev?.componentMap || {});
+            const libComponentExample = componentNames.slice(0, 2).join(',') || 'Demo';
             res.statusCode = 200;
             res.setHeader('Content-Type', 'application/json; charset=utf-8');
             res.end(JSON.stringify({
@@ -245,26 +1361,143 @@ function installDebugTools(server, ctx, state) {
                 usage: {
                     localStorageKey: 'VITE_DEV_SERVER_ORIGIN',
                     suggested: requestOrigin,
-                    snippet: `localStorage.setItem('VITE_DEV_SERVER_ORIGIN', '${requestOrigin}'); location.reload();`
-                }
+                    snippet: `localStorage.setItem('VITE_DEV_SERVER_ORIGIN', '${requestOrigin}'); location.reload();`,
+                    libBuild: {
+                        command: 'dev-to build',
+                        env: {
+                            DEV_TO_VUE_LIB_SECTION: libComponentExample
+                        },
+                        output: {
+                            dir: 'dist/<component>/',
+                            js: '<component>.js (UMD, 尽量单文件 bundle)',
+                            css: '<component>.css (如有样式)'
+                        },
+                        externals: [
+                            'vue'
+                        ],
+                        umdGlobals: {
+                            vue: 'Vue'
+                        }
+                    }
+                },
+                tips: [
+                    '宿主侧需设置 localStorage.VITE_DEV_SERVER_ORIGIN（可从 originCandidates 里选择一个可访问的 origin）。',
+                    'components 参数的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
+                    '如需产出可分发 UMD 包：使用 `dev-to build`（等价于 `vite build --mode lib`，仅构建 components 指定的组件，输出到 dist/<component>/）。'
+                ]
             }, null, 2));
             return;
         }
+        if (pathname === STABLE_LOADER_UMD_PATH) {
+            const vueLoaderUmdPath = getVueLoaderUmdPath();
+            if (vueLoaderUmdPath) try {
+                const umdCode = node_fs.readFileSync(vueLoaderUmdPath, 'utf-8');
+                res.statusCode = 200;
+                res.setHeader('Content-Type', "application/javascript; charset=utf-8");
+                res.setHeader('Access-Control-Allow-Origin', '*');
+                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                res.end(umdCode);
+                return;
+            } catch (error) {
+                console.warn(`[dev_to:vue] Failed to read local UMD: ${error}. Falling back to CDN.`);
+            }
+            const cdnUrl = 'https://cdn.jsdelivr.net/npm/@dev-to/vue-loader@latest/dist/index.umd.js';
+            res.statusCode = 302;
+            res.setHeader('Location', cdnUrl);
+            res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+            res.end();
+            return;
+        }
+        if (pathname.startsWith(STABLE_LOADER_BASE_PATH)) {
+            const loaderPathPattern = new RegExp(`^${STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
+            const match = pathname.match(loaderPathPattern);
+            if (match) {
+                const componentName = match[1];
+                const isHttps = !!server.config.server.https;
+                const proto = isHttps ? 'https' : 'http';
+                const hostHeader = String(req.headers.host || '');
+                const addr = server.httpServer?.address();
+                const actualPort = addr && 'object' == typeof addr ? addr.port : void 0;
+                const origin = hostHeader ? `${proto}://${hostHeader}` : `${proto}://localhost${actualPort ? `:${actualPort}` : ''}`;
+                const hasLocalUmd = null !== getVueLoaderUmdPath();
+                const vueLoaderUrl = hasLocalUmd ? `${origin}${STABLE_LOADER_UMD_PATH}` : 'https://cdn.jsdelivr.net/npm/@dev-to/vue-loader@latest/dist/index.umd.js';
+                const code = createLoaderUmdWrapper({
+                    componentName,
+                    origin,
+                    contractEndpoint: STABLE_CONTRACT_PATH,
+                    vueLoaderUrl
+                });
+                res.statusCode = 200;
+                res.setHeader('Content-Type', "application/javascript; charset=utf-8");
+                res.setHeader('Access-Control-Allow-Origin', '*');
+                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                res.end(code);
+                return;
+            }
+        }
         if (url.startsWith(STABLE_DEBUG_HTML_PATH)) {
-            const isHttps = !!server.config.server.https;
-            const proto = isHttps ? 'https' : 'http';
             const addr = server.httpServer?.address();
             const actualPort = addr && 'object' == typeof addr ? addr.port : void 0;
             const lanHosts = getLanIPv4Hosts();
+            const isHttps = !!server.config.server.https;
+            const proto = isHttps ? 'https' : 'http';
             const candidateHosts = [
                 'localhost',
                 '127.0.0.1',
                 ...lanHosts
             ];
             const originCandidates = candidateHosts.map((h)=>`${proto}://${h}${actualPort ? `:${actualPort}` : ''}`);
+            const serverConfigLite = {
+                host: server.config.server.host,
+                port: server.config.server.port,
+                strictPort: server.config.server.strictPort,
+                cors: server.config.server.cors,
+                https: !!server.config.server.https
+            };
+            let configFilePath;
+            const rootDir = server.config.root || process.cwd();
+            configFilePath = server.config.configFile || void 0;
+            if (!configFilePath) try {
+                const files = node_fs.readdirSync(rootDir);
+                const configFile = files.find((file)=>/^vite\.config\.(ts|js|mjs|cjs|cts)$/.test(file));
+                if (configFile) configFilePath = node_path.resolve(rootDir, configFile);
+            } catch  {
+                const configFiles = [
+                    'vite.config.ts',
+                    'vite.config.js',
+                    'vite.config.mjs',
+                    'vite.config.cjs',
+                    'vite.config.cts'
+                ];
+                for (const file of configFiles){
+                    const fullPath = node_path.resolve(rootDir, file);
+                    if (node_fs.existsSync(fullPath)) {
+                        configFilePath = fullPath;
+                        break;
+                    }
+                }
+            }
+            const entryPathMap = {};
+            for (const [componentName, entry] of Object.entries(ctx.contract.dev.componentMap)){
+                if ('*' === componentName) {
+                    entryPathMap[componentName] = ctx.audit.defaultEntryAbs;
+                    continue;
+                }
+                if (entry.startsWith('/@fs')) {
+                    const fsPath = toFsPathFromViteEntry(entry);
+                    if (fsPath) entryPathMap[componentName] = fsPath;
+                } else if ('/' === entry) entryPathMap[componentName] = ctx.audit.defaultEntryAbs;
+                else if (!entry.startsWith('http://') && !entry.startsWith('https://') && !entry.startsWith('/')) entryPathMap[componentName] = node_path.resolve(rootDir, entry);
+            }
             const html = renderDebugHtml({
+                resolvedDevComponentMap: ctx.contract.dev.componentMap,
+                entryPathMap,
+                audit: ctx.audit,
+                stats: ctx.stats,
+                serverConfigLite,
                 originCandidates,
-                contract: ctx.contract
+                actualPort: 'number' == typeof actualPort ? actualPort : void 0,
+                configFilePath
             });
             res.statusCode = 200;
             res.setHeader('Content-Type', 'text/html; charset=utf-8');
@@ -274,104 +1507,6 @@ function installDebugTools(server, ctx, state) {
         next();
     });
 }
-function renderDebugHtml(params) {
-    const { originCandidates, contract } = params;
-    const originsJson = JSON.stringify(originCandidates);
-    const contractJson = JSON.stringify(contract, null, 2);
-    return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>DevTo Vue Debug</title>
-  <style>
-    body { font-family: system-ui, sans-serif; padding: 20px; color: #111827; }
-    h1 { font-size: 20px; margin-bottom: 8px; }
-    .card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
-    .origin { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
-    button { border: 1px solid #d1d5db; background: #fff; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
-    pre { background: #f9fafb; padding: 10px; border-radius: 6px; overflow: auto; font-size: 12px; }
-    code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-  </style>
-</head>
-<body>
-  <h1>DevTo Vue Debug</h1>
-  <div class="card">
-    <div><strong>Set origin in host</strong></div>
-    <div id="origin-list"></div>
-    <pre id="origin-cmd"></pre>
-  </div>
-  <div class="card">
-    <div><strong>Contract</strong></div>
-    <pre>${contractJson}</pre>
-  </div>
-  <script>
-    const origins = ${originsJson};
-    const list = document.getElementById('origin-list');
-    const cmd = document.getElementById('origin-cmd');
-    function makeCmd(origin) {
-      return "localStorage.setItem('VITE_DEV_SERVER_ORIGIN', '" + origin + "'); location.reload();";
-    }
-    function setCmd(origin) {
-      cmd.textContent = makeCmd(origin);
-    }
-    function copy(text) {
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        return navigator.clipboard.writeText(text);
-      }
-      const ta = document.createElement('textarea');
-      ta.value = text;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand('copy');
-      document.body.removeChild(ta);
-      return Promise.resolve();
-    }
-    origins.forEach(origin => {
-      const row = document.createElement('div');
-      row.className = 'origin';
-      const code = document.createElement('code');
-      code.textContent = origin;
-      const btn = document.createElement('button');
-      btn.textContent = 'Copy';
-      btn.onclick = () => {
-        setCmd(origin);
-        copy(makeCmd(origin));
-      };
-      row.appendChild(code);
-      row.appendChild(btn);
-      list.appendChild(row);
-    });
-    if (origins[0]) setCmd(origins[0]);
-  </script>
-</body>
-</html>`;
-}
-function tryResolveWithExtensions(p) {
-    const exts = [
-        '.vue',
-        '.tsx',
-        '.jsx',
-        '.ts',
-        '.js'
-    ];
-    if (node_fs.existsSync(p)) return p;
-    const parsed = node_path.parse(p);
-    if (parsed.ext) for (const ext of exts){
-        const cand = node_path.join(parsed.dir, `${parsed.name}${ext}`);
-        if (node_fs.existsSync(cand)) return cand;
-    }
-    else for (const ext of exts){
-        const cand = `${p}${ext}`;
-        if (node_fs.existsSync(cand)) return cand;
-    }
-    return null;
-}
 function toViteFsPath(filePath) {
     const normalized = filePath.replace(/\\/g, '/');
     return normalized.startsWith('/') ? `/@fs${normalized}` : `/@fs/${normalized}`;
@@ -487,7 +1622,7 @@ function transformAssetUrl(code, id) {
                   const ORIGIN = new URL(import.meta.url).origin;
                   return path.startsWith('http') ? path : ORIGIN + path;
                 } catch (e) {
-                  console.warn('${constants_PLUGIN_LOG_PREFIX} Failed to resolve static asset URL:', path, e);
+                  console.warn('${PLUGIN_LOG_PREFIX} Failed to resolve static asset URL:', path, e);
                   return path;
                 }
               })()`);
@@ -525,7 +1660,7 @@ const __dev_to__resolveAsset = (path) => {
     const origin = new URL(import.meta.url).origin;
     return path.startsWith('/') ? origin + path : origin + '/' + path;
   } catch (e) {
-    console.warn('${constants_PLUGIN_LOG_PREFIX} Failed to resolve CSS asset URL:', path, e);
+    console.warn('${PLUGIN_LOG_PREFIX} Failed to resolve CSS asset URL:', path, e);
     return path;
   }
 };
@@ -549,7 +1684,7 @@ function createContractVirtualModuleCode(contract) {
     const STATE = (G[DEBUG_KEY] ||= { logged: {} });
     if (!STATE.logged.contract) {
       STATE.logged.contract = true;
-      console.groupCollapsed('${constants_PLUGIN_LOG_PREFIX} contract loaded');
+      console.groupCollapsed('${PLUGIN_LOG_PREFIX} contract loaded');
       console.log('Origin:', ORIGIN);
       console.log('Paths:', CONTRACT.paths);
       console.log('Events:', CONTRACT.events);
@@ -576,7 +1711,7 @@ function createInitVirtualModuleCode() {
       const STATE = (G[DEBUG_KEY] ||= { logged: {} });
       if (!STATE.logged.init) {
         STATE.logged.init = true;
-        console.groupCollapsed('${constants_PLUGIN_LOG_PREFIX} init loaded (HMR enabled)');
+        console.groupCollapsed('${PLUGIN_LOG_PREFIX} init loaded (HMR enabled)');
         console.log('Origin:', ORIGIN);
         console.log('This module imports /@vite/client.');
         console.groupEnd();
@@ -626,7 +1761,7 @@ function createVueRuntimeVirtualModuleCode() {
       const STATE = (G[DEBUG_KEY] ||= { logged: {} });
       if (!STATE.logged.runtime) {
         STATE.logged.runtime = true;
-        console.groupCollapsed('${constants_PLUGIN_LOG_PREFIX} vue-runtime loaded');
+        console.groupCollapsed('${PLUGIN_LOG_PREFIX} vue-runtime loaded');
         console.log('Origin:', ORIGIN);
         console.log('Vue.version:', Vue?.version);
         console.groupEnd();
@@ -687,7 +1822,7 @@ function devToVuePlugin(components, options) {
             if (1 === Object.keys(resolvedConfig.componentMap).length && '/' === resolvedConfig.componentMap['*']) {
                 const warn = server.config.logger?.warn?.bind(server.config.logger) ?? console.warn;
                 warn('');
-                warn(`Warning: ${constants_PLUGIN_LOG_PREFIX} No componentName configured. This works in dev mode but should be explicit for production builds.`);
+                warn(`Warning: ${PLUGIN_LOG_PREFIX} No componentName configured. This works in dev mode but should be explicit for production builds.`);
                 warn('Use devToVuePlugin({ ComponentName: "src/ComponentName.vue" }) or devToVuePlugin({ ComponentName: "/" }).');
                 warn('');
             }
@@ -767,4 +1902,4 @@ function devToVuePlugin(components, options) {
         devCssAssetPlugin
     ];
 }
-export { devToVuePlugin };
+export { createLoaderUmdWrapper, devToVuePlugin, generateLibBuildNextConfig, generateLibVirtualEntryCode, getLibVirtualEntryPath, isLibBuild, normalizeLibCss, renderDebugHtml, resolveBuildTargets, toSafeOutDirName, toSafeUmdName };