Vue渲染报错Property 'projects'未在实例定义问题排查解决

触发Property "xxx" was accessed during render but is not defined on instance报错的本质是模板渲染时访问的变量没有挂载到组件实例上，你的代码里有两个直接导致问题的错误：

• 你写的配置项是大写S开头的Setup()，Vue识别的组合式API入口是全小写的setup，大写开头的属性会被Vue直接忽略，等于你写的整个配置函数完全没有执行
• 就算你把S改成小写，非语法糖形式的setup函数里，导入的变量、内部声明的变量默认是函数作用域内的局部变量，必须通过return显式暴露给模板，否则模板访问时找不到对应实例属性，就会抛错。

你提到加setup属性到script标签上报错消失，是因为<script setup>是Vue提供的组合式API语法糖，默认会把顶层的导入、变量声明全部自动暴露给模板，不需要手动return，所以能直接识别到导入的projects。你觉得这种写法没法导出其他组件需要的变量，是因为不了解defineExpose编译宏的用法，不是语法糖本身的限制。

二选一即可，优先推荐方案2，代码更简洁，是Vue官方推荐的写法。

方案1：保留普通script标签的显式setup写法 #

需要修改两处：

1. 把大写开头的Setup改为全小写的setup
2. 将模板需要用到的projects、响应式变量pId通过return暴露出去，注意可修改的响应式值需要用ref包裹，否则修改后视图不会更新
   修复后的script代码如下：

<script>
// 引入响应式API
import { ref } from 'vue'
import {projects} from "@/projects.js"
export default {
    // 必须全小写
    setup(){
        // 可修改的响应式变量用ref包裹
        const pId = ref(0);
        // 所有模板要用到的变量、导入值都要在这里return
        return {
            projects,
            pId
        }
    }
}
</script>

注意：如果后续要在js逻辑里修改pId的值，需要写pId.value = xxx，模板里直接写pId即可，不需要加.value

方案2：使用