Vue 3生产环境组件未渲染仅显标签，开发环境正常

核心问题 #

为何Vue 3组件在生产环境中未渲染，仅在HTML body中显示组件名称元素，但在开发环境中一切正常？

图示示例 #

通过Chrome开发者工具检查元素：

• 开发环境下显示符合预期：
  
• 生产环境下仅显示组件名称元素，组件未渲染：
  

上下文 #

我有一个大型Vue 3应用，调用外部组件的代码如下：

<template>
  <div>
    <wkpComponent />
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  import externalComponent from '@/util/external-component';
  import * as Vue from 'vue/dist/vue.esm-bundler';
  window.Vue = Vue;

  var host = window.location.protocol + "//" + window.location.host.split(':')[0];
  const wkpComponent = defineAsyncComponent(
    () => externalComponent(host + `:8087/wkpApp.umd.min.js`)
  );

  export default {
    name: "WkpView",
    components: {
      wkpComponent,
    },
    data() {
      return {}
    },        
  };
</script>

外部应用通过以下命令构建为压缩版UMD库（怀疑此为问题根源）：

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest dist --name "wkpApp" --inline-vue

该项目的App.vue内容如下：

<template>
  <div id="app">
    <wkp-view id="test1" :WKPsettings="WKPsettings" />
  </div>
</template>

<script>
import WkpView from '@/components/WKP/wkp-view.vue'

export default {
  components: {
    WkpView,
  },
}
</script>

被引入的wkp-view.vue组件内容大致如下：

<template>
    <div id="base-bg">
        <h1> Yoo </h1>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
}
</script>

问题分析与解决方案 #

1. 核心原因：Vue实例冲突 #

你在构建外部组件时使用了--inline-vue参数，这会把完整的Vue实例打包进UMD库，但主应用本身已经加载了Vue 3。生产环境下，两个独立的Vue实例相互干扰，导致外部组件无法被正确识别和挂载；而开发环境因未压缩、调试模式的兼容性处理，暂时掩盖了这个冲突。

2. 修复步骤 #

（1）修改外部组件构建命令

移除--inline-vue参数，让外部组件以Vue作为外部依赖，复用主应用的Vue实例：

npx vue-cli-service build --target lib --formats umd-min --no-clean --dest dist --name "wkpApp"

（2）优化主应用的Vue暴露（可选）

如果外部UMD组件依赖全局Vue对象，可在主应用入口文件（如main.js）中统一暴露：

import * as Vue from 'vue'
window.Vue = Vue

更规范的方式是让外部组件以ES模块形式导出，避免依赖全局变量。

（3）添加异步组件错误捕获

生产环境下添加错误捕获，方便快速定位加载问题：

const wkpComponent = defineAsyncComponent({
  loader: () => externalComponent(host + `:8087/wkpApp.umd.min.js`),
  onError(error) {
    console.error('外部组件加载失败:', error)
  }
})

（4）统一组件命名规范

Vue模板中建议使用kebab-case格式引用组件（如<wkp-component>），避免生产环境HTML解析时的大小写敏感问题，同时保持组件注册名与模板引用名的一致性。

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