Vue3中如何在Vue组件外部访问定义的全局变量？

Vue 3 中通过app.config.globalProperties挂载的属性，仅会注入到当前应用下所有组件的实例上下文，普通JS文件不存在组件实例上下文，自然无法直接访问到该属性。
这和Vue 2的实现逻辑有本质区别：Vue 2是全局共享同一个Vue构造函数，挂载到Vue.prototype上的属性，任意位置导入Vue构造函数就能读取；Vue 3采用应用实例隔离设计，每个createApp()生成的应用实例独立，不存在全局共享的Vue构造函数，因此无法沿用Vue 2的访问逻辑。

方案1：抽离独立全局模块（最推荐） #

这种方式不依赖Vue应用实例，组件和普通JS文件都能直接导入使用，还天然支持ES模块的tree-shaking，维护性更好。

1. 新建单独的全局变量存储文件，比如src/common/globalVars.js：

// 静态全局变量直接定义导出
export const $myGlobalVariable = '你的全局变量值'

// 如果需要全局响应式变量，从vue引入响应式API定义即可
import { ref } from 'vue'
export const $dynamicGlobalVar = ref('初始值')

2. 在main.js中导入变量，同时挂载到globalProperties供组件模板/选项式API直接使用：

import { createApp } from 'vue'
import * as globalVars from './common/globalVars.js'
import App from './App.vue'

const app = createApp(App)
// 批量挂载全局属性到应用
Object.keys(globalVars).forEach(key => {
  app.config.globalProperties[key] = globalVars[key]
})
app.mount('#app')

3. 普通JS文件中使用时，直接导入对应变量即可：

// 任意普通JS文件
import { $myGlobalVariable, $dynamicGlobalVar } from '@/common/globalVars.js'

// 静态变量直接使用
console.log($myGlobalVariable)
// 响应式变量需要读取.value属性
console.log($dynamicGlobalVar.value)

方案2：导出应用实例后直接读取配置 #

如果不想额外抽离文件，可以直接把初始化好的app实例导出，其他文件导入实例后读取配置：

1. 修改main.js，将创建的app实例导出：

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

export const app = createApp(App)
app.config.globalProperties.$myGlobalVariable = '你的全局变量值'
app.mount('#app')

2. 普通JS文件中导入app实例，直接从配置中读取属性：

import { app } from '@/main.js'
const myGlobal = app.config.globalProperties.$myGlobalVariable
console.log(myGlobal)

注意：该方案存在导入时序问题，如果普通JS文件的导入时机早于app实例挂载全局属性的步骤，仍然会拿到undefined；多应用实例场景下还会出现变量混淆问题，优先选择方案1。

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