Vue组合式API中ref开发模式正常，构建部署后失效

问题根源 #

你的代码错误地将单个DOM元素的ref当作数组访问：file.value[0].click()。在Vue中，当用ref绑定单个元素时，file.value直接指向该DOM元素本身，而非数组。开发环境因Vue的宽松处理未触发报错，但生产构建后严格的代码优化会暴露这个错误，导致抛出Cannot read properties of null (reading '0')异常。

修复步骤 #

• 修正ref访问逻辑：将openCamera函数里的file.value[0].click()改为file.value.click()，直接调用DOM元素的click方法。
• 确保Input元素始终存在：确认<input>没有被v-if这类条件渲染指令从DOM中移除，若需动态隐藏，改用v-show（仅隐藏元素，不销毁DOM）。

修正后的完整代码 #

HTML部分 #

<input ref="file" type="file" accept="image/*" capture="environment" style="display:none" />
<v-btn @click="openCamera()">take photo</v-btn>

Script部分 #

<script setup>
import { ref } from 'vue';
const file = ref(null)

function openCamera() {
    // 增加存在性检查，提升代码健壮性
    if (file.value) {
        file.value.click()
    }
}
</script>

额外优化建议 #

添加if (file.value)的存在性检查，可以避免因任何意外情况（如元素被动态移除）导致的报错，进一步提升代码稳定性。

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