Vite + Vue 3 调用mount()后获取Vue实例无法找到$store等属性问题

该差异属于Vue 3不同脚手架的默认编译策略差异，不存在遗漏配置：

• vue-cli创建的Vue 3项目默认根组件多使用非<script setup>写法，mount()返回的是完整根组件实例Proxy，可直接访问$store、$router等全局挂载属性
• Vite创建的Vue 3项目默认启用<script setup>语法，该语法下mount()默认仅返回包含显式暴露内容的公开实例Proxy，开发环境还会额外套一层调试用Proxy，因此会出现Proxy嵌套结构，全局属性默认不会直接暴露在返回结果中

以下方案在Vite/vue-cli环境下均通用：

方案1：通过应用实例获取完整根实例（最推荐） #

不要直接链式调用mount()，先保存应用实例，通过内部属性获取完整实例：

const app = createApp(App)
app.use(store)
app.use(router)
app.mount("#app")

// app._instance.proxy 即为完整的根组件实例，包含所有全局属性
console.log(app._instance.proxy.$store)
console.log(app._instance.proxy.$router)

方案2：调整根组件写法 #

将根组件App.vue的<script setup>改为普通Composition API/Options API写法，mount()返回的实例就会和vue-cli项目表现一致：

// App.vue 示例（去掉<script setup>语法糖）
export default {
  setup() {
    // 原有业务逻辑
    return {}
  }
}

调试临时方案 #

如果仅需要开发环境调试查看全局属性，可在打印的嵌套Proxy中找到[[Target]]属性，其下的proxy字段就是完整根实例，可直接查看所有全局挂载属性。

注：业务代码中如果需要使用store、router，更推荐使用Vue官方提供的useStore()、useRouter() Composition API，更符合Vue 3的设计规范。

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