vite-plugin-vue-inline-template

Vite 插件：在构建时将带 inline:* 标记的 Vue SFC 片段 <template> 展开进主 <template>，可选通过 payload 向片段内传参。

安装

npm install vite-plugin-vue-inline-template -D

使用

在 vite.config.ts 中先于 @vitejs/plugin-vue 注册本插件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import inlineTemplate from "vite-plugin-vue-inline-template";

export default defineConfig({
  plugins: [inlineTemplate(), vue()],
});

写法说明

• 定义片段：根级 <template inline:名称> 或 <template inline:名称="payloadParam">。带 = 时，片段 inner 里可通过 payloadParam.xxx 访问传入对象。
• 使用片段：在主 <template> 内写 <template inline:名称 />、<template inline:名称></template>，或使用 <template inline:名称="{ a, b }" /> 传入对象字面量（需与定义处的 payload 名对应）。

<template inline:title>
  <div @click="clickTitle">COUNT</div>
</template>
<template inline:count>count is {{ count }}</template>
<template inline:list-item="payload">
  <span>{{ payload[0] }} with count {{ payload[1] }}！</span>
</template>
<template>
  <template inline:title> </template>

  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">
      <template inline:count> </template>
    </button>
    <div v-for="(item, i) in list" :key="item">
      <template inline:list-item="[i, item]" />
    </div>
  </div>
</template>

更多示例见仓库内 example/。