Vite/Vue HMR报错：ReferenceError: Cannot access 'axios' before initialization

问题根源 #

首次构建正常，但HMR重载时触发这个错误，核心原因是热重载时模块的执行顺序和首次加载不一致，大概率是helpers/axios.js的导出逻辑有延迟，或者存在隐性的循环依赖，导致VueAxios注册时，axios实例还没完成初始化。

可行的解决办法 #

1. 确保axios实例立即初始化并导出 #

打开helpers/axios.js，检查是否是延迟初始化的写法，改成直接创建并导出实例：

// helpers/axios.js 正确写法
import axios from 'axios';

// 直接创建实例
const axiosInstance = axios.create({
  baseURL: '/api',
  // 你的其他配置项
});

// 立即导出初始化完成的实例
export default axiosInstance;

避免这种容易出问题的写法：

// 错误示例：延迟初始化，HMR时可能还没赋值就被引用
let axiosInstance;

export function initAxios() {
  axiosInstance = axios.create(/* ... */);
}

export default axiosInstance;

2. 给vue-axios插件添加HMR适配逻辑 #

在plugins/vue-axios.js里加上热重载的接受处理，确保重载时重新正确注册VueAxios：

// plugins/vue-axios.js
import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from '../helpers/axios';

Vue.use(VueAxios, axios);

// 适配HMR：当axios模块更新时，重新注册
if (import.meta.hot) {
  import.meta.hot.accept('../helpers/axios', (newAxiosModule) => {
    Vue.use(VueAxios, newAxiosModule.default);
  });
}

3. 排查并消除循环依赖 #

检查是否存在循环引用：比如helpers/axios.js里有没有引用某个组件，而该组件又通过this.$axios使用了vue-axios的实例。如果有，重构代码打破循环：

• 把axios的配置逻辑和业务逻辑彻底分开，业务模块不要直接依赖axios的配置文件
• 或者通过一个中间模块间接引用，切断循环链

4. 强制热重载时重启根实例 #

如果上面的方法都没用，可以在app.js里添加HMR处理，触发根组件重新挂载，确保所有依赖都正确初始化：

// app.js
import Vue from 'vue';
import './plugins/vue-axios';
import App from './App.vue';

let vueInstance = new Vue({
  render: (h) => h(App),
}).$mount('#app');

// HMR触发时，销毁旧实例并重新创建
if (import.meta.hot) {
  import.meta.hot.accept('./plugins/vue-axios', () => {
    vueInstance.$destroy();
    document.getElementById('app').innerHTML = '';
    vueInstance = new Vue({
      render: (h) => h(App),
    }).$mount('#app');
  });
}

验证方式 #

随便改个组件的代码触发热重载，看控制台还会不会报那个错误，同时确认首次构建依然正常运行。

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