Vue3使用provide/inject设置全局变量时h1不显示如何解决

你实际创建了两个完全独立的Vue应用实例，所有全局配置仅对当前配置的实例生效，跨实例不共享：

• 首先你通过let app = createApp(App)创建了第一个应用实例，不管是调用app.provide()注入全局值，还是注释中的app.config.globalProperties挂载全局属性，都是配置在这个未被挂载的实例上
• 后续执行挂载时你又重新调用了一次createApp(App)生成了第二个全新实例，直接给这个新实例注册路由后挂载到页面，这个实例上没有做过任何全局变量配置，组件自然拿不到对应的值。

所有全局配置、插件注册、挂载操作必须针对同一个应用实例执行，两种全局变量实现方式的正确写法如下：

方式一：provide + inject 实现 #

修改main.js，所有操作复用同一个应用实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css';
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.js'

const app = createApp(App)
// 在要挂载的实例上配置全局注入
app.provide('headingMain', 'Direct mail marketing that works')
// 注册插件、挂载全程用同一个实例
app.use(router).mount('#app')

现有Home.vue的inject写法不需要改动，重启项目后即可正常渲染h1内容。

方式二：globalProperties 全局属性实现 #

如果用全局属性方案，同样把配置挂载到最终要渲染的实例上：

// main.js 对应配置段
const app = createApp(App)
app.config.globalProperties.$headingMain = 'Direct mail marketing that works'
app.use(router).mount('#app')

对应组件不需要写inject，直接通过this访问即可：

<template>
  <h1 class="heading">{{ $headingMain }}</h1>
</template>

<script>
export default {
  mounted() {
    console.log(this.$headingMain)
  }
}
</script>

提示：如果使用*