Vue3中v-autofocus指令解析失败报错求助

问题现象 #

控制台抛出警告：

Note.vue:11 [Vue warn]: Failed to resolve directive: autofocus 
  at <Note key="1" note= {id: '1', content: 'Lorem ipsum dolor sit amet consectetur adipisicing…riosam a, quos, amet animi, esse id nobis vel ad.'} onDeleteClicked=fn<handleDeleteClicked> > 
  at <ViewNotes onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

已在src/directives/vAutofocus.js定义自定义指令：

export const vAutofocus = {
  mounted: (el) => {
    el.focus();
  },
};

并在src/view/AddEditNote.vue中引入使用：

<template>
    <textarea type="text" placeholder="Type something ..." v-autofocus />
</template>
<script setup>
    import { vAutofocus } from "@/directives/vAutofocus"
</script>

报错原因 #

警告明确指向Note.vue组件无法解析autofocus指令，但你仅在AddEditNote.vue中引入了该指令。说明**Note.vue组件内也使用了v-autofocus指令，却未导入对应的自定义指令**。

解决方案 #

1. 修复Note.vue组件的指令引入 #

打开Note.vue文件，若模板中使用了v-autofocus，在<script setup>中添加指令导入：

<script setup>
import { vAutofocus } from "@/directives/vAutofocus"
// 其他业务代码
</script>

2. 可选：全局注册指令（多组件共用场景） #

如果多个组件都需要使用v-autofocus，可在项目入口文件全局注册，避免每个组件重复导入：
在src/main.js中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import { vAutofocus } from '@/directives/vAutofocus'

const app = createApp(App)
// 全局注册指令，名称对应模板中的v-autofocus
app.directive('autofocus', vAutofocus)

app.mount('#app')

全局注册后，所有组件无需单独导入，直接在模板中使用v-autofocus即可。

3. 核对拼写正确性 #

确认以下内容无拼写错误：

• 指令文件导出的名称是vAutofocus
• 组件中导入的名称与导出完全一致
• 模板中使用的是v-autofocus（Vue会自动将驼峰命名转换为短横线格式，此规则合法）

内容的提问来源于stack exchange，提问作者happy