Vue+Vite项目中不使用单文件组件时如何配置VitePress？

1. 自定义Vite配置处理拆分组件 #

在你的VitePress配置文件（docs/.vitepress/config.ts）中，添加Vite自定义配置，通过vite字段配置Vue插件的模板解析规则，同时添加自定义loader处理.tpl文件：

import { defineConfig } from 'vitepress';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  vite: {
    plugins: [
      vue({
        // 让Vue插件识别.tpl文件为模板源
        include: [/\.vue$/, /\.ts$/, /\.tpl$/],
      }),
      // 自定义loader将.tpl文件转换为可导入的模板字符串
      {
        name: 'tpl-loader',
        transform(code, id) {
          if (id.endsWith('.tpl')) {
            return `export default \`${code.replace(/`/g, '\\`')}\``;
          }
        },
      },
    ],
    resolve: {
      // 可选：配置组件路径别名，方便导入
      alias: {
        '@/components': '/src/components',
      },
    },
  },
});

2. 调整组件的导入与注册逻辑 #

在组件的index.ts文件中，导入模板和样式，手动定义Vue组件：

import { defineComponent } from 'vue';
import template from './template.tpl';
import './style.scss';

export default defineComponent({
  name: 'YourComponentName',
  template, // 直接使用导入的模板字符串
  // 组件逻辑（props、methods、setup等）
  props: {
    // 定义你的组件属性
  },
  setup() {
    // 编写组件逻辑
    return {};
  },
});

3. 验证配置效果 #

重新执行npm run docs:dev，VitePress将能正确识别拆分的组件文件，不再抛出“组件内必须包含至少一个