求助：VueDesigner集成Nextcloud Vue组件在Vite中无法显示

环境依赖 #

我的package.json依赖配置如下：

"dependencies": {
    "@nextcloud/vue": "^9.0.0-alpha.5",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@nextcloud/browserslist-config": "^3.0.1",
    "@nextcloud/vite-config": "^2.3.0",
    "vite": "^6"
  }

操作流程与问题 #

• 在VueDesigner中创建基于Vite、纯CSS的新项目
• 按规范创建web-types文件，并在vite.config.ts的liveDesigner插件配置中引入@nextcloud/vue组件库
• 安装依赖并启动Vite开发服务器后，能在VueDesigner中拖拽/右键添加Nextcloud组件、编辑属性，但这些组件在VueDesigner预览和浏览器中均不显示——检查发现组件从未被加载到浏览器

Vite配置整合需求 #

我是Vite新手，不知道如何将Nextcloud提供的基础配置：

import { createAppConfig } from '@nextcloud/vite-config'

export default createAppConfig({
    // entry points: {name: script}
    main: 'src/main.js',
    settings: 'src/settings.js',
})

与VueDesigner生成并修改后的vite.config.ts（如下）整合：

/// <reference types="vite-ssg" />

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import { liveDesigner } from '@pinegrow/vite-plugin'
import AutoImportComponents from 'unplugin-vue-components/vite'
import AutoImportAPIs from 'unplugin-auto-import/vite'
import VueRouter from 'unplugin-vue-router/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import Layouts from 'vite-plugin-vue-layouts'
import Unocss from 'unocss/vite'
import presetIcons from '@unocss/preset-icons'
import { unheadVueComposablesImports } from '@unhead/vue'

import VueDevTools from 'vite-plugin-vue-devtools'

// import { visualizer } from 'rollup-plugin-visualizer'

import { createAppConfig } from '@nextcloud/vite-config'

// https://vitejs.dev/config/
export default defineConfig({
  ssgOptions: {
    beastiesOptions: {
      // E.g., change the preload strategy
      preload: 'media',
      // Other options: https://github.com/danielroe/beasties#usage
    },
  },
  plugins: [
    VueRouter({
      // routesFolder: 'src/pages', // default
      dts: 'typed-router.d.ts',
    }),
    VueDevTools(),
    // IMPORTANT: Vue must be placed after VueRouter() 
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),
    Layouts(),
    // For details, refer to https://github.com/antfu/unplugin-auto-import#configuration
    AutoImportAPIs({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
        /\.mdx$/, // .mdx
      ],
      imports: [
        'vue',
        VueRouterAutoImports, // Remove 'vue-router',
        // 'vue-i18n',
        // 'vue/macros',
        unheadVueComposablesImports,
        '@vueuse/core',
        'pinia',
      ],
      dirs: [
        // Please ensure that you update the filenames and paths to accurately match those used in your project. 

        'src/composables',
        // 'src/utils',
        'src/stores',
        '**/pg-*/**', // To auto-import composables from Vue Designer plugins.
      ],
      vueTemplate: true,
      dts: 'auto-imports.d.ts',
    }),
    // For details, refer to https://github.com/antfu/unplugin-vue-components#configuration
    AutoImportComponents({
      // Please ensure that you update the filenames and paths to accurately match those used in your project. 

      dirs: ['src/components'],

      // allow auto load markdown components under ./src/components/
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.mdx?/],

      // resolvers: [], // Auto-import using resolvers
      dts: 'components.d.ts',
    }),
    Unocss({
      presets: [
        presetIcons({
          prefix: 'i-', // default prefix, do not change
        }),
      ],
      content: {
        pipeline: {
          include: ['./src/**/*'],
        },
      },
    }),
    liveDesigner({
      iconPreferredCase: 'unocss',
      // default value (can be removed), unocss by default uses the unocss format for icon names
      plugins: [
         {
           name: 'Nextcloud Vue 9.0 alpha',
           key: 'nextcloud',
           pluginPath: fileURLToPath(
             new URL('./web-types/nextcloud-vue-lib.json', import.meta.url),
           ),
         },
       ],
    }),
  ],

  // build: {
  //   // Vite uses Rollup under the hold, so rollup options & plugins can be used for advanced usage
  //   rollupOptions: {
  //     plugins: [visualizer()],
  //   },
  // },

  resolve: {
    alias: {
      /* Must be either an object, or an array of { find, replacement, customResolver } pairs. */
      /* Refer to: https://vitejs.dev/config/shared-options.html#resolve-alias */
      /* Please ensure that you update the filenames and paths to accurately match those used in your project. */

      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./src', import.meta.url)),
      '~~': fileURLToPath(new URL('./', import.meta.url)),
    },
  },
})

需要解决两个核心问题：

• Nextcloud组件未加载显示的原因及修复方案
• 如何将Nextcloud的createAppConfig配置与现有Vite配置无缝整合

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