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.

  • es.davy.ai/
  • Programación /
  • El lazy loading del enrutador de Vue no funciona en Vite (Error: Variable desconocida “dynamic import”)

El lazy loading del enrutador de Vue no funciona en Vite (Error: Variable desconocida “dynamic import”)

04 Jun, 2023 Programación

He construido el siguiente código en Vue router y funciona perfectamente en Vue-CLI.

        import store from "./../../store/index.js";

    function getView(view) {
      return () => import(`@/views/settings/${view}.vue`);
    }

    const routes = [
      {
        path: "/myProfile",
        name: "MyProfile",
        component: getView("MyProfile"),
        beforeEnter: (to, from, next) => {
          document.title = "Profile - " + store.getters.getAppName;
          if (store.getters["userStore/authenticated"]) {
            next();
          } else {
            next({ name: "Home" });
          }
        },
      }
    ]
    export default routes;

Ahora estoy reemplazando Vue-CLI con Vite y me da el siguiente error.

TypeError: Failed to resolve module specifier '@/views/settings/MyProfile.vue'

Cuando elimino la función getView(“MyProfile”) y uso la importación directa como se muestra a continuación, funciona.

    const routes = [
          {
            path: "/myProfile",
            name: "MyProfile",
            component: () => import('@/views/settings/MyProfile.vue'),
            beforeEnter: (to, from, next) => {
              document.title = "Profile - " + store.getters.getAppName;
              if (store.getters["userStore/authenticated"]) {
                next();
              } else {
                next({ name: "Home" });
              }
            },
          }
        ]

¿Alguien puede explicar por qué?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema probablemente surge debido a la forma en que Vite maneja las importaciones dinámicas. En Vite, las importaciones dinámicas se tratan como módulos separados que se elevan hasta la parte superior del script, lo que a veces puede dar lugar a problemas con la forma en que se resuelven los módulos.

    En el código original que utiliza getView, la importación dinámica se devuelve como una función que luego se llama cuando se carga el componente. Vite puede no ser capaz de resolver correctamente la importación dinámica cuando se llama como una función, lo que lleva al error.

    Al utilizar directamente la sentencia import sin la función getView, Vite puede resolver adecuadamente el especificador de módulo e importar el componente sin errores.

    Una solución alternativa potencial para este problema en Vite es utilizar import.meta.glob para importar dinámicamente los componentes en tiempo de compilación. Por ejemplo:

    const vistas = import.meta.glob('./../../vistas/ajustes/*.vue')

const rutas = [
  {
    path: '/miPerfil',
    name: 'MiPerfil',
    component: vistas['./MiPerfil.vue'],
    beforeEnter: (to, from, next) => {
      // ...
    }
  }
]

    Este código carga todos los componentes de Vue desde el directorio ./../../vistas/ajustes utilizando import.meta.glob, y luego selecciona dinámicamente el componente adecuado para cargar según la ruta. Este método debería funcionar tanto en Vue-CLI como en Vite.

Comments are closed.