Nuxt 2.x中vue-loading-overlay组件无法正常使用问题求助

问题分析 #

报错TypeError: (0 , external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createStaticVNode) is not a function，核心原因是当前安装的vue-loading-overlay版本默认适配Vue3，而Nuxt2.x基于Vue2.x，版本不兼容导致API调用错误。

解决方案 #

1. 安装Vue2兼容版组件 #

卸载当前版本，重新安装适配Vue2的3.x分支版本：

npm uninstall vue-loading-overlay
npm install vue-loading-overlay@3.4.7 --save

注：vue-loading-overlay的3.x版本适配Vue2，4.x及以上版本仅支持Vue3。

2. 修改Nuxt插件配置，限定客户端运行 #

Nuxt2插件默认会在服务端和客户端双端执行，而vue-loading-overlay是纯客户端组件，需修改nuxt.config.js中的插件配置，添加mode: 'client'：

plugins: [ 
  { src: '@/plugins/vueloadingoverlaylibrary.js', mode: 'client' }
]

3. 完善插件文件内容 #

确保正确引入样式，并完成全局注册（两种方式二选一即可）：

import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

// 方式一：全局注册组件，直接在模板中使用
Vue.component('LoadingOverlay', Loading);

// 方式二：挂载到Vue原型，方便在组件逻辑中调用
Vue.prototype.$loading = Loading;

4. 组件使用示例 #

模板调用方式

<template>
  <div>
    <loading-overlay :active="isLoading" can-cancel />
    <button @click="toggleLoading">切换加载状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    toggleLoading() {
      this.isLoading = !this.isLoading;
    }
  }
}
</script>

逻辑调用方式

<script>
export default {
  methods: {
    fetchData() {
      // 显示加载层
      const loader = this.$loading.show({
        canCancel: true,
        onCancel: () => console.log('加载被取消')
      });
      // 模拟异步请求
      setTimeout(() => {
        loader.hide();
      }, 2000);
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Manoj Kumar Sah