Estoy trabajando con una aplicación Vue 3 muy simple, que se detalla a continuación.
Esto funciona a las mil maravillas cuando se incluye Vue como secuencia de comandos; consulte el fragmento de código.
Sin embargo, necesito usarlo con un paquete web y, por lo tanto, incluirlo como un paquete npm. En este caso, la aplicación se carga, pero Vue vacía todo lo que hay dentro del div en el que está montada. Ver ejemplo de CodeSandbox
He intentado diferentes formas de exportar e importar el objeto de la aplicación, pero ninguna funciona. ¿Qué estoy pasando por alto?
const {ref} = Vue; const App = { setup() { const count = ref(0); const inc = () => { count.value++; }; return {count, inc}; } } Vue.createApp(App).mount('#simple-example') <head> <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> </head> <body> <div id="simple-example"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.</button> </div> </body>Cambiando esto:
import { createApp } from "vue";dentro de esto:
import { createApp } from "vue/dist/vue.esm-bundler";arregló el problema Gracias a Estus Flask
ACTUALIZAR
La solución se puede mejorar aún más creando un alias para vue en el archivo de configuración del paquete web:
resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js" } } Eso hará posible usar "vue" nuevamente en la declaración de importación, que luego apunta a vue.esm-bundler.js en lugar del valor predeterminado vue.runtime.es.js .