- vite和webpack构建的项目main.ts都是一样的
首先来一个最简单的mian.ts示例
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- 然后我们需要使用config.gloablProperties全局挂载变量就要改造一下
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
- 现在我们可以使用config.globalProperties挂载全局变量
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 挂载一个$name的全局变量
app.config.globalProperties.$name = '123'
app.mount('#app')
-
在vue组件当中去使用这个全局的变量，我们就直接在HelloWorld当中去使用一下vue3.x中config.globalProperties挂载的全局变量，ts会给出一个这个提示
图片.png - 如果使用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>
