Я использую Vite для создания веб-компонента Vue 3, включающего компоненты PrimeVue. Однако стили компонентов PrimeVue не включаются в конечный результат сборки. Компоненты отображаются без каких-либо стилей, хотя в режиме разработки все работает нормально.
Детали настройки:
vite.config.js:< /strong>
src/widget.ts:
src/bootstrap.ts
< strong>App.vue
Ожидаемое поведение:
Стили компонентов PrimeVue должны быть объединены и правильно применены в производственной сборке, так же, как они появляются в режиме разработки.
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {fileURLToPath, URL} from 'node:url'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
}
},
build: {
manifest: true,
chunkSizeWarningLimit: 1000,
cssCodeSplit: false,
rollupOptions: {
input: {
widget: fileURLToPath(new URL('./src/widget.ts', import.meta.url)),
},
output: {
format: 'iife',
inlineDynamicImports: false,
entryFileNames: '[name].js',
chunkFileNames: '[name].js',
assetFileNames: '[name].[ext]'
},
}
}
})
import type {App} from "vue";
import {bootstrap} from "./bootstrap.ts";
class MediaLibrary extends HTMLElement {
private _mediaLibraryApp: App<Element>;
constructor() {
super();
this.attachShadow({mode: 'open'});
}
async connectedCallback() {
const attributes = {
baseUrl: this.getAttribute('data-base-url'),
csrf: this.getAttribute('data-csrf-token'),
appLabel: this.getAttribute('data-app-label'),
model: this.getAttribute('data-model'),
objectId: this.getAttribute('data-object-id'),
collections: JSON.parse(this.getAttribute('data-collections'))
}
this._mediaLibraryApp = bootstrap(this.shadowRoot, attributes);
}
disconnectedCallback() {
if (this._mediaLibraryApp) {
this._mediaLibraryApp.unmount();
}
}
}
customElements.define('media-library', MediaLibrary);
import {createApp} from 'vue';
import App from './App.vue';
import {createPinia} from "pinia";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";
import APIService from "./APIService.ts";
import mediaLibrary from "./plugin.ts";
import 'https://unpkg.com/@primevue/[email protected]/umd/aura.min.js'
export function bootstrap(target, attributes) {
const app = createApp(App)
app.use(createPinia());
app.use(PrimeVue, {
});
app.use(ConfirmationService);
app.use(ToastService);
app.use(mediaLibrary, attributes)
APIService.init(app);
app.mount(target);
return app
}
<script setup lang="ts">
import MLContainer from "./components/Layout/MLContainer.vue";
</script>
<template>
<link rel="stylesheet" href="http://localhost:5174/style.css">
<MLContainer/>
</template>
<style>
</style>
Виссарион
Вопрос задан17 мая 2024 г.