vue3中使用defineComponent创建的组件时，页面无法正常渲染，并且控制台抛出警告

项目场景：

项目中使用Ag grid表格，但是表格自带的loading效果太丑了，想通过表格的 gridOptions 配置中的loadingOverlayComponent属性传入一个自定义一个loading组件。由于自定义loading组件代码量很少，所以考虑在当前组件使用vue3的defineComponent API创建一个局部组件。如下：

// 自定义loading组件
const CustomLoadingOverlay = defineComponent({
  template: `<div v-loading="true" element-loading-text="加载中……" style="width: 100px;height: 100px"></div>`,
})

// Ag grid表格配置
const gridOptions = reactive({
  loadingOverlayComponent: 'CustomLoadingOverlay',
  components: {
    CustomLoadingOverlay,
  },
})

---

问题描述

运行时发现控制台报了一段警告：

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

并且组件也没有渲染出来。

---

原因分析：

出现这个警告是因为在 Vue 3 的构建中使用了模板选项，但该构建不支持运行时编译。Vue 3 支持两种构建版本：运行时（runtime-only）和完整（full）。运行时构建不包含模板编译，因此如果在模板中使用了某些功能（例如 v-for 指令中的 key 属性或某些内置指令的简写形式），则可能会遇到这个问题。

---

解决方案：

为了解决这个问题，需要添加 Webpack 的别名配置（设置'vue$' 的别名指向）。这样做可以让打包工具知道它应该使用带有完整功能的 Vue 版本，而不是不带编译支持的运行时版本。

• 如果项目是使用 Vue CLI 创建的，那么 Webpack 的配置通常隐藏在 vue.config.js 文件中。可以在项目根目录下创建或修改这个文件，然后添加 Webpack 的别名配置。
• 对于自定义设置或使用 Webpack 直接构建的项目，可能会在 webpack.config.js 文件中找到 Webpack 配置。

以下是基于 Vue CLI 和 Webpack 的 vue.config.js 文件中添加别名的示例：

// vue.config.js  
module.exports = {  
  configureWebpack: {  
    resolve: {  
      alias: {  
        'vue$': 'vue/dist/vue.esm-bundler.js'  
      }  
    }  
  }  
}

configureWebpack 属性用于扩展或修改内部的 Webpack 配置。在 resolve.alias 中，设置 'vue$' 的别名指向 'vue/dist/vue.esm-bundler.js'，这告诉 Webpack 在处理 'import Vue from 'vue'' 这样的语句时应该使用哪个文件。

请注意，如果您使用的是不同的构建工具或自定义设置，配置的具体细节可能会有所不同。最重要的是找到您的构建配置文件，并正确地设置别名指向 'vue/dist/vue.esm-bundler.js'。