Vue3自定义元素集成PrimeVue后DOM渲染异常及config读取错误

问题描述 #

使用Vue3开发可嵌入第三方网站的样式隔离自定义元素，采用PrimeVue作为组件框架。本地编译测试时渲染正常，但构建部署后：

• InputText组件未显示，Button组件正常
• 控制台报错：TypeError: Cannot read properties of undefined (reading 'config')，对应代码行：

  "p-variant-filled": e.variant ? e.variant === "filled" : r.$primevue.config.inputStyle === "filled"
  

依赖版本 #

• primeflex: ^3.3.1
• primeicons: ^6.0.1
• primevue: ^3.49.1
• vue: ^3.4.15

项目文件内容 #

App.ce.vue #

<script>
import Button from "primevue/button";
import FloatLabel from "primevue/floatlabel";
import InputText from 'primevue/inputtext';

export default {
  name: 'App',

  components: {
    Button, FloatLabel, InputText
  },
}
</script>

<template>
  <header>
  </header>

  <main>
    <FloatLabel>
      <InputText id="username" />
      <label for="username">Username</label>
    </FloatLabel>

    <Button label="Submit" />
  </main>
</template>

<style>
  @import 'primevue/resources/themes/lara-light-green/theme.css';
  @import 'primevue/resources/primevue.min.css';
  @import 'primeflex/primeflex.css';
  @import 'primeicons/primeicons.css';
</style>

widget-entry.js #

import {defineCustomElement} from 'vue';
import App from "./App.ce.vue";

const WidgetElement = defineCustomElement(App);
customElements.define('my-widget', WidgetElement);

main.js #

import 'primevue/resources/themes/lara-light-green/theme.css'
import 'primevue/resources/primevue.min.css';
import 'primeflex/primeflex.css';
import 'primeicons/primeicons.css'

import { createApp } from 'vue'
import App from './App.ce.vue'
import PrimeVue from 'primevue/config';

import FloatLabel from 'primevue/floatlabel';
import InputText from 'primevue/inputtext';
import Button from "primevue/button";

const app = createApp(App);
app.use(PrimeVue);
app.component('FloatLabel', FloatLabel);
app.component('Button', Button);
app.component('InputText', InputText);

app.mount('#app')

vite-config.js #

import {fileURLToPath, URL} from 'node:url'
import {defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default ({mode}) => {
  const env = loadEnv(mode, process.cwd(), "");

  return defineConfig({
    define: {
      "process.env": env,
    },
    plugins: [
      vue()
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    build: {
      lib: {
        entry: 'src/widget-entry.js',
        name: 'MyWidget',
        fileName: (format) => format === 'umd' ? 'registration-widget.js' : `registration-widget.${format}.js`
      }
    }
  })
}

第三方嵌入方式 #

<script src="https://path/to/my/js/file"></script>
<div style="height: 500px; width: auto; overflow-y: auto;">
    <my-widget></my-widget>
</div>

问题根源 #

构建时使用的入口文件widget-entry.js未初始化PrimeVue配置，导致组件内部无法访问$primevue.config。而本地调试用的main.js中调用了app.use(PrimeVue)完成了初始化，因此本地渲染正常。

解决方案 #

1. 修复自定义元素入口的PrimeVue注入 #

修改widget-entry.js，在定义自定义元素时传入PrimeVue插件，确保组件实例能访问到PrimeVue配置：

import { defineCustomElement } from 'vue';
import App from "./App.ce.vue";
import PrimeVue from 'primevue/config';

// 定义自定义元素时注入PrimeVue插件
const WidgetElement = defineCustomElement(App, {
  plugins: [PrimeVue]
});
customElements.define('my-widget', WidgetElement);

2. 可选：将样式内联到JS文件（避免额外引入CSS） #

如果希望第三方网站无需单独引入CSS文件，修改vite-config.js的build配置，将样式内联到生成的JS中：

build: {
  lib: {
    entry: 'src/widget-entry.js',
    name: 'MyWidget',
    fileName: (format) => format === 'umd' ? 'registration-widget.js' : `registration-widget.${format}.js`
  },
  css: {
    inline: true // 启用样式内联
  }
}

3. 验证修复效果 #

重新构建项目并部署，嵌入第三方网站后：

• InputText组件应正常渲染
• 控制台不再出现Cannot read properties of undefined (reading 'config')错误

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