es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La carga dinámica de Vite y Vue3 mediante meta.glob falla en modo de producción.

04 Jun, 2023 Programación

Intento cargar los componentes de forma dinámica con Vite y Vue3 para que no se carguen en absoluto los componentes que no se utilizan. Esto funciona bien en modo DEV, pero tan pronto como ejecuto npm run build, no se pueden cargar los componentes porque Vite no resuelve correctamente las rutas.

Este es mi archivo main.js:

import { createApp, defineAsyncComponent } from 'vue';
import App from '@/App.vue';

const components = Object.assign(
    import.meta.glob("./components/**/*.vue"),
    import.meta.glob("./widgets/**/*.vue")
)

for (const k in components) {
    const name = k.split("/").pop().replace('.vue', '');
    app.component(name, defineAsyncComponent(() => import(k)));
}

Entonces, los componentes se cargan desde la ruta ./components/input/input.vue y se añaden a components por su nombre de archivo.

Después de ejecutar npm run build, Vite genera archivos minificados añadidos en la carpeta dist/assets que se parecen a: input.a08d9c39.js

Cuando hago una console.log a los componentes, intenta cargarlo desde la misma ruta que en modo dev, así que ./components/input/input.vue, que no es correcto en modo prod.

No estoy seguro si el archivo vite.config.js es necesario para una solución, de todos modos este es el archivo:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from "path";

export default defineConfig({
    plugins: [
        vue(),
    ],

    resolve: {
        alias: {
          '@': resolve(__dirname, './src'),
        },
    }
})
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el Problema de Carga de Componentes Dinámicos en Vite y Vue3 Durante la Compilación de Producción

    Para resolver el problema de que los componentes no se carguen correctamente durante la compilación de producción con Vite y Vue3, es necesario modificar el archivo main.js y agregar algunos cambios en el archivo vite.config.js. Siga los siguientes pasos:

    Solución:

    1. Modificar el archivo main.js para resolver las rutas de los componentes dinámicos en modo de producción utilizando el objeto de componentes importado del método Object.keys. 
      import { createApp, defineAsyncComponent } from 'vue';
import App from '@/App.vue';

const components = Object.assign(
  import.meta.globEager('./components/**/*.vue'),
  import.meta.globEager('./widgets/**/*.vue')
);

const app = createApp(App);
for (const path in components) {
  const name = path.match(/.*\/(.*)\.vue$/)[1];
  const component = defineAsyncComponent(() => components[path]);
  app.component(name, component);
}

app.mount('#app');
    2. Modificar el archivo vite.config.js para resolver la ruta del directorio de la aplicación al importar componentes estableciendo la clave base en './' y la clave build.publicDir en 'dist'. 
      import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
     vue(),
  ],
  base: './',
  build: {
     publicDir: 'dist'
  },
  resolve: {
     alias: {
        '@': path.resolve(__dirname, 'src'),
     },
  },
});

    Estos cambios deberían ayudar a resolver el problema de la carga de componentes dinámicos en modo de producción al utilizar Vite y Vue3.

Comments are closed.