Tengo un proyecto que ejecuta algunos componentes de Vue2/BootstrapVue, configuración en webpacker, y estoy tratando de migrar de webpacker a vite y obtuve algunos problemas de Bootstrap Vue en el camino, como Multiple instances of Vue detected o $attr and $listeners is readonly , tal como se describe en la documentación de BootstrapVue aquí
Ahora, para solucionar esto, en webpacker, en algún lugar de mi configuración, estaba haciendo esto:
const resolver = { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } }; environment.config.merge(resolver) Intenté hacer algo similar en vite, agregando lo siguiente en mi archivo vite.config.ts , pero esto no parece funcionar, así que probablemente no lo esté haciendo bien:
import {defineConfig} from 'vite' import RubyPlugin from 'vite-plugin-ruby' import {createVuePlugin} from "vite-plugin-vue2"; export default defineConfig({ plugins: [ RubyPlugin(), createVuePlugin() ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } })Entonces mi pregunta es cuál sería la solución recomendada para este problema.
Vite proporciona una configuración resolve.dedupe que puede usar cuando se encuentre con problemas de duplicación:
export default defineConfig({ resolve: { dedupe: ['vue', 'vue-router'], }, }) Sin embargo, esto no es habitual para vue , en la mayoría de los casos funciona bien desde el primer momento.
Intente eliminar el alias vue$ y cambie sus importaciones para usar vue , Vite debería optimizarlo automáticamente como una dependencia y resolver correctamente las importaciones.