如何开发Vite插件将自定义后缀文件转换为Vue组件

核心通过Vite自定义插件拦截指定后缀文件，将原始内容包装为标准Vue单文件组件格式后，交由官方Vue插件完成后续编译即可，无需额外实现SFC编译逻辑。

具体实现步骤 #

• 编写自定义Vite转换插件，拦截.vue.my_ext后缀的文件请求
• 在插件的transform钩子中，将文件原始内容包装为包含<template>、<script>块的标准SFC结构
• 将插件放在@vitejs/plugin-vue之前注册，保证转换后的内容能被Vue插件正确处理

完整配置示例 #

直接在Vite配置文件中添加如下代码即可：

// vite.config.js
import { defineConfig } from 'vvite'
import vue from '@vitejs/plugin-vue'

const transformMyExtToVue = () => ({
  name: 'transform-my-ext-vue',
  enforce: 'pre', // 强制插件在Vue编译插件之前执行
  transform(sourceCode, fileId) {
    // 匹配所有自定义后缀的组件文件
    if (fileId.endsWith('.vue.my_ext')) {
      // 包装为标准Vue单文件组件格式
      const standardSfc = `
<template>
  ${sourceCode}
</template>
<script>
export default {}
</script>
      `.trim()
      return {
        code: standardSfc,
        map: null
      }
    }
  }
})

export default defineConfig({
  plugins: [
    transformMyExtToVue(), // 注意自定义插件需要放在vue插件之前
    vue()
  ],
  resolve: {
    // 配置后缀自动解析，导入时可以省略完整后缀
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.vue.my_ext']
  }
})

TypeScript 类型适配（可选） #

如果项目使用TypeScript，需要在全局类型声明文件中添加模块定义，消除导入时报错：

// src/env.d.ts
declare module '*.vue.my_ext' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<Record<string, never>, Record<string, never>, any>
  export default component
}

扩展说明 #

如果后续你的.my_ext文件需要支持自定义script、style块规则，只需要在transform钩子中增加对应内容的解析逻辑，拆分后拼接至SFC对应标签块内即可，当前示例完全覆盖你提出的纯模板转换场景。配置完成后原有导入写法无需修改，组件可以直接正常注册、渲染，和标准Vue组件使用体验完全一致。

内容的提问来源于stack exchange，提问作者Деревянко Сергей