Vue3项目全局常量导入显示undefined，热重载后恢复的问题求助

问题重现 #

用vue-cli搭建的Vue3项目，通过npm run serve运行：

• 在main.js中定义并导出常量：let x = 'google'
• 在services/GetCategoriesService.js中导入x并打印
• 在components/footer.vue的<script>中引入该服务脚本
• 现象：
  • 页面刷新后控制台输出undefined
  • 在服务文件中添加console.log触发热重载（不刷新页面），输出两次google
  • 再次刷新页面，输出两次undefined
  • 再次热重载，输出三次google，以此循环

问题原因 #

1. 模块加载顺序问题：main.js是应用入口，但服务模块的加载时机早于main.js中x的赋值操作。打包解析模块依赖时，服务模块会先被加载执行，此时x还未被定义赋值，所以第一次打印undefined。
2. 热重载的模块缓存特性：Vue-cli的热重载会重新加载修改后的模块，但之前的模块执行上下文并未完全销毁，导致每次热重载都会多执行一次打印逻辑；而刷新页面会重置所有模块的加载状态，回到初始未赋值的状态，所以又出现undefined。

解决方案 #

方案一：使用Vue全局属性挂载常量 #

这是Vue官方推荐的全局变量挂载方式，避免模块加载顺序问题：

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

const app = createApp(App)
// 将常量挂载到全局属性
app.config.globalProperties.$x = 'google'
app.mount('#app')

在服务或组件中使用：

// services/GetCategoriesService.js
import { getCurrentInstance } from 'vue'

// 封装成函数，确保在Vue实例初始化后调用
export function printX() {
  const globalProps = getCurrentInstance()?.appContext.config.globalProperties
  console.log(globalProps.$x) // 输出'google'
}

在组件中调用：

// components/footer.vue
<script setup>
import { printX } from '../services/GetCategoriesService.js'

// 在组件初始化时调用
printX()
</script>

方案二：单独创建全局常量文件 #

最稳妥的方式是将常量抽离到独立模块，避免依赖入口文件的执行时机：

// src/constants.js
export const x = 'google'

在服务和组件中直接导入：

// services/GetCategoriesService.js
import { x } from '../constants.js'

console.log(x) // 直接输出'google'

// components/footer.vue
<script setup>
import { x } from '../constants.js'
import '../services/GetCategoriesService.js'

console.log(x)
</script>

原写法怪异现象的本质 #

原写法将常量定义在main.js中导出，而main.js的核心逻辑是创建Vue实例，服务模块的加载优先级高于main.js中x的赋值语句，导致首次加载时x未初始化。热重载时，main.js已经执行过，x已经存在，所以重新加载的服务模块能拿到值；但热重载不会清除之前的模块执行记录，每次热重载都会多执行一次打印，导致次数叠加。刷新页面后所有模块重新加载，回到初始状态，所以又出现undefined。

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