vue遇到的某bug:Property "xxx" was accessed during render but is not defined on

main.js

import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(router).use(db).use(store).mount('#app')

app.config.globalProperties.VITE_MODE = import.meta.env.VITE_MODE

App.vue

<template>
   <router-view></router-view>
   <Header/>    
</template>

在Header组件和router-view的默认组件(称为A)的模板中使用了VITE_MODE变量 Header出现报错,但是A没有报错,感觉非常奇怪,诶 都是同一层的组件,怎么A就报错了呢?

[Vue warn]: Property "VITE_MODE" was accessed during render but is not defined on instance. 
  at <Header> 
  at <App>

查找原因过程如下: 在渲染Header组件的时候,render函数会从渲染上下文_ctx去获取某个属性 function _sfc_render(_ctx, _cache, $props,$setup, $data,$options){} 这个_ctx是一个代理对象,查找data,setupState,props等没有的话,会返回appContext.config.globalProperties上的某个值,我发现这个时候globalProperties上还没有VITE_MODE 想来 app.config.globalProperties.VITE_MODE = import.meta.env.VITE_MODE 是在Header挂载之后执行的,而A组件能获取VITE_MODE是因为,router-view内容是异步渲染的,而普通的组件在初次渲染时是同步的,所以获取不到VITE_MODE 只要把 app.config.globalProperties.VITE_MODE = import.meta.env.VITE_MODE 放到mount前面就好啦