编译器配置参考

编译器选项

这些选项属于 vite.config.* 的 vue.compiler，也可以通过 defineConfig(vpConfig).withVue(vueConfig) 设置。并非所有集成都使用每个选项。

对于 Vite 项目，直接插件选项覆盖共享配置：

import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [
    vize({
      vapor: true,
      sourceMap: true,
      customRenderer: true,
      templateSyntax: "standard",
    }),
  ],
});

模板语法

compiler.templateSyntax默认是"standard"。

• "standard"接受可恢复的无效语法，发出警告，并重写为有效输出。
• "strict" 报告无效语法为编译错误。
• "quirks" 保留模板语法兼容性的怪异问题，无需额外警告。

已知的案例有：

• v-for带有不匹配边缘括号的别名。Vue 剥离前导(或后) 在分value、key和index之前的别名;标准模式与严格模式报告 这些别名是畸形的，而个性模式则是Vue的。
• 非空的HTML元素，采用自闭语法编写，如<div />或<span />。 标准模式会警告并重写它们为空元素、严格模式错误和个性模式保留 它们作为自闭叶片。

<template>
  <!-- Standard/strict reject this. Quirk mode compiles it as `item in items`. -->
  <div v-for="(item in items">{{ item }}</div>

  <!-- Standard/strict reject this. Quirk mode compiles it as `item in items`. -->
  <div v-for="item) in items">{{ item }}</div>

  <!-- Standard warns and rewrites this as `<div></div>`. Strict errors. Quirk keeps it as a leaf. -->
  <div />
</template>

Vue上游实现：

• forAliasRE
• parseForExpression中的stripParensRE

关于 HTML 严格模式行为的 invalid 后面，请参见 Troubleshooting 自动关闭标签。

JSX 和 TSX 输出模式

关于完整的创作API、作用域样式、类型检查、编辑器支持及限制，请参见 JSX 和 TSX 指南。本节仅涵盖输出模式配置键。

Vize 将 .jsx/.tsx Vue 组件编译为 Virtual DOM 或 蒸汽输出。compiler.jsxMode 选择全局 默认用于未明确选择加入的组件;默认是"vdom"。

// vite.config.ts
import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  compiler: {
    // Default every .jsx/.tsx component to Vapor output.
    jsxMode: "vapor",
  },
});

jsxMode独立于compiler.vapor：vapor切换蒸汽以控制.vue SFC，同时jsxMode 控制JSX/TSX的默认后端。项目可以将SFC保留在VDOM上，同时默认JSX为 蒸汽，或者反过来。Vite 插件也直接接受 jsxMode 作为插件选项，这 覆盖共享配置。

每个组件指令

单个组件通过指令序言覆盖默认，镜像"use strict"：

// Compiled to Vapor regardless of the configured default.
const Fast = () => {
  "use vue:vapor";
  return <div class="fast" />;
};

// Compiled to Virtual DOM regardless of the configured default.
const Classic = () => {
  "use vue:vdom";
  return <div class="classic" />;
};

由于每个组件独立路由，单个模块可以混合两个后端：

// vite.config.ts : vue: { compiler: { jsxMode: "vapor" } }

// No directive -> takes the configured default (Vapor here).
export const Dashboard = () => <main>{/* ... */}</main>;

// Opts back into Virtual DOM just for this component.
export const LegacyWidget = () => {
  "use vue:vdom";
  return <aside>{/* ... */}</aside>;
};

优先权

组件的输出模式按以下顺序解析：

1. 每个组件的"use vue:vapor"/"use vue:vdom"指令。
2. compiler.jsxMode默认设置（或插件的jsxMode选项）。
3. 内置的备选方案，"vdom"。

诊断

一个以"use vue:"开头但未命名已知模式的指令（例如打字错误 "use vue:vdomx"）被报告为编译错误，而非无声忽略，且有两个冲突 一个组件中的模式指令（"use vue:vapor" 跟随 "use vue:vdom"）也是 被诊断出来。像"use strict"这样的无关序章则保持原样。

Vue方言

vue.dialect 为独立 HTML 文档（.html/.htm）选择 Vue 方言：

// vite.config.ts
import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  dialect: "petite-vue",
});

• "vue"将独立HTML文档视为普通的Vue从CDN翻译的文档。
• "petite-vue" 将独立的 HTML 文档选入 小巧的方言（v-scope/v-effect 完成和针对小范围的IDE特性）。

当缺少密钥时，会根据文档结构性地检测方言：一个<script src> 解析为petite-vue包、petite-vue的内联ES导入，或PetiteVue.createApp 叫。评论或散文中提到小维特从不切换方言，且单排 组件始终使用标准的Vue方言。