vite-plugin-vue-component-name-custom

一个用于 Vue3 项目的 Vite 插件，可以根据组件路径自动注入组件名称。

特性

• 🚀 自动为 Vue 组件注入 name 属性
• 💪 支持 <script setup> 和普通 <script> 语法
• 🎯 支持自定义组件名称生成规则
• 📁 支持指定处理特定路径下的组件
• 🚫 支持排除不需要处理的组件

安装

# npm
npm install vite-plugin-vue-component-name-custom -D

# pnpm
pnpm add vite-plugin-vue-component-name-custom -D

# yarn
yarn add vite-plugin-vue-component-name-custom -D

配置选项

getComponentName (已弃用，请使用 nameGenerator)

• 类型: (file: string) => string
• 必填: 否

nameGenerator

• 类型: (filePath: string) => string
• 必填: 否
• 默认值: 内置的名称生成函数

用于自定义组件名称生成规则的函数，接收文件路径作为参数，返回组件名称。如果不提供，将使用内置的名称生成规则。

include

• 类型: string | RegExp | (string | RegExp)[]
• 必填: 否
• 默认值: /\.vue$/

指定需要处理的文件。可以是字符串、正则表达式或它们的数组。

exclude

• 类型: string | RegExp | (string | RegExp)[]
• 必填: 否
• 默认值: undefined

指定需要排除的文件。可以是字符串、正则表达式或它们的数组。

高级用法

自定义组件名称生成规则

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueComponentNameCustom from 'vite-plugin-vue-component-name-custom'

export default defineConfig({
  plugins: [
    vue(),
    vueComponentNameCustom({
      // 自定义文件匹配规则
      include: /\.vue$/,
      exclude: /node_modules/,
      
      // 自定义组件名称生成规则
      nameGenerator: (filePath) => {
        // 示例：添加前缀
        const baseName = filePath.split('/').pop()?.replace('.vue', '') || ''
        return `My${baseName}`
      }
    })
  ]
})