1. vite和webpack构建的项目main.ts都是一样的
   首先来一个最简单的mian.ts示例

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. 然后我们需要使用config.gloablProperties全局挂载变量就要改造一下

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

3. 现在我们可以使用config.globalProperties挂载全局变量

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 挂载一个$name的全局变量
app.config.globalProperties.$name = '123'

app.mount('#app')

4. 在vue组件当中去使用这个全局的变量，我们就直接在HelloWorld当中去使用一下vue3.x中config.globalProperties挂载的全局变量，ts会给出一个这个提示

   
   
   图片.png
5. 如果使用as any这种方式，可以解决这个编辑器提示的问题，但是又来一个新的问题
   webpack构建的项目在终端会提示一个黄色的警告，就是使用了any这个警告，经过一系列百度之后，查找到了一个比较完美的解决方案

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentInternalInstance} from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

// 使用config.globalProperties挂载的全局变量
const { appContext: { config: { globalProperties }} }  =  getCurrentInstance() as ComponentInternalInstance;
console.log(globalProperties.$name);
// 网上有些网友也遇到// 对象可能为 "null"。ts(2531)这样的问题，就可以使用下面这种写法
console.log(globalProperties?.$name);
</script>