NuxtJS搭配Vuetify使用v-file-input组件出现File未定义报错如何解决

• 报错核心为Nuxt默认服务端渲染（SSR）机制导致：v-file-input组件底层依赖浏览器原生File/FileList API实现计数、大小展示等功能，而服务端Node.js环境不存在该全局API，渲染阶段执行到相关逻辑就会触发ReferenceError。
• 仅当前文件报错的原因：该文件没有配置客户端渲染规则，其他正常使用v-file-input的文件要么用<client-only>标签包裹了依赖浏览器API的组件，要么使用.client.vue后缀命名被Nuxt识别为纯客户端组件，要么对应页面单独配置了ssr: false关闭了服务端渲染。
• 复制其他正常代码到当前文件可运行的现象也符合该逻辑：其他正常代码没有调用依赖浏览器API的能力，服务端渲染阶段不会触发报错。

• 方式1：用<client-only>标签包裹v-file-input组件，强制该部分仅在客户端渲染

<template>
    <client-only>
        <v-file-input
            counter
            multiple
            show-size
            truncate-length="15"
        ></v-file-input>
    </client-only>
</template>

• 方式2：如果是页面级文件，在definePageMeta中关闭当前页面的SSR

<script setup>
definePageMeta({
  ssr: false
})
</script>

• 方式3：将当前组件重命名为[文件名].client.vue，Nuxt会自动将其标记为仅客户端渲染组件。

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