Tengo una aplicación Vue.js que creé con Vite. Esta aplicación se ejecuta correctamente cuando uso npm run dev y visito la aplicación en el navegador. Ahora, estoy tratando de agrupar la aplicación como un solo archivo de código para poder usarla como un complemento para Figma .

Sé que la página index.html se carga porque puedo editar el HTML y ver los cambios. Sin embargo, la página no está cargando ni ejecutando la aplicación Vue.js. Puedo ver la siguiente advertencia en el registro de la consola:

<link rel=modulepreload> has no 'href' value

Mi proyecto está estructurado así:

 / /dist /assets index.a386f87b.css index.dc441194.js vendor.fbe8b50a.js index.html manifest.json plugin.js /src /views Index.vue Items.vue Calendar.vue /res /css theme.css /images loading.gif splash.jpeg App.vue main.js index.html

Cuando miro el archivo index.html en el directorio dist , veo:

 <script type="module" crossorigin src="/assets/index.dc441194.js"></script> <link rel="modulepreload" href="/assets/vendor.fbe8b50a.js"> <link rel="stylesheet" href="/assets/index.a386f87b.css"> <div id="app" class="position-absolute top-0 left-0 vh-100 vw-100"></div>

Las referencias parecen correctas. Sin embargo, claramente algo anda mal ya que la aplicación no se carga como complemento en Figma. Una vez más, sé que estoy cargando correctamente el archivo index.html porque si lo edito manualmente, los cambios aparecen en el complemento. Esto me lleva a agrupar la aplicación como un solo archivo de código . En este punto, estoy atascado sin embargo. No veo una manera de lograr esto a través de las capacidades integradas de Vite. Intenté incluir el vite-plugin-singlefile . Desafortunadamente eso tampoco funcionó para mí. Actualmente, mi archivo vite.config.js se ve así:

 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'; export default defineConfig(({command, mode }) => { return { assetsDir: 'res', plugins: [ vue(), ], root: 'src', build: { emptyOutDir: true, outDir: '../dist' } } });

¿Qué estoy haciendo mal?