tengo la siguiente situacion:
Tengo un componente en mi aplicación vue que carga dinámicamente los componentes según una consulta API. Aquí está mi plantilla:
<template> <main class="flex-1"> <div class="py-6"> <div class="px-4 sm:px-6 md:px-0 space-y-6"> <LoadingComponent v-if="chosenSideBarItem === null" /> <component v-else :is="getComponent(chosenSideBarItem.component)" /> </div> </div> </main> </template>Aquí está mi parte del guión.
const componentMap = { Comp1: "./components/Comp1.vue", Comp2: "./components/Comp2.vue", Comp3: "./components/Comp3.vue", }; Object.entries(componentMap).forEach(([key, value]) => { asyncComponents[key] = defineAsyncComponent({ loader: () => import(value), loadingComponent: LoadingComponent, delay: 200, errorComponent: ErrorComponent, timeout: 3000, }) }); function getComponent(name : string) { return asyncComponents[name]; }Básicamente, la aplicación carga dinámicamente un componente dado dependiendo de alguna cadena. Esto funciona perfectamente bien en mi entorno de desarrollo, sin embargo, si trato de implementarlo en mi contenedor docker con nginx, aparece un error MIME
Loading module from “http://localhost/assets/components/Comp1.vue” was blocked because of a disallowed MIME type (“text/html”).Probablemente porque ese directorio no existe. Aquí está mi nginx.conf
worker_processes 4; events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; include /etc/nginx/mime.types; try_files $uri $uri/ /index.html; } } }¡Gracias por adelantado!
¿Por qué no hacerlo así?
components: { firstcomponent: defineAsyncComponent({ loader: () => import('./firstcomponent.vue'), }), secondcomponent: defineAsyncComponent({ loader: () => import('./secondcomponent.vue'), }), },de esta manera, el código es menos complicado y se carga a pedido cuando se usa en la plantilla
el uso en la plantilla sería como
<component :is="componentName" />donde nombreComponente sería "primer componente" o "segundo componente"
Si tiene problemas con la repetición del mismo código en varios cargadores, puede hacerlo
const defaultParams = { delay: 20, timeout: 3000, } components: { firstcomponent: defineAsyncComponent({ loader: () => import('./firstcomponent.vue'), ...defaultParams, }), secondcomponent: defineAsyncComponent({ loader: () => import('./secondcomponent.vue'), ...defaultParams, }), },No está claro si está utilizando Vite o Webpack (Vue CLI), pero ambos tienen limitaciones muy similares al usar importaciones dinámicas ( import(...) )
Aquí hay una documentación para @rollup/plugin-dynamic-import-vars utilizada por Vite
La limitación más importante se basa en el hecho de que un empaquetador debe procesar import() en tiempo de compilación. Por lo tanto, el empaquetador debe poder analizar estáticamente el argumento en tiempo de compilación y deducir cuáles son las posibles importaciones. El uso de variables está, por supuesto, fuera de la cuestión...
Entonces, una forma de solucionarlo es esta:
const componentLoaders = { Comp1: () => import("./components/Comp1.vue"), Comp2: () => import("./components/Comp2.vue"), Comp3: () => import("./components/Comp3.vue"), }; Object.entries(componentLoaders).forEach(([key, loader]) => { asyncComponents[key] = defineAsyncComponent({ loader, loadingComponent: LoadingComponent, delay: 200, errorComponent: ErrorComponent, timeout: 3000, }) }); function getComponent(name : string) { return asyncComponents[name]; }...o sin usar el mapa:
function getAsyncComponent(name : string) { return defineAsyncComponent({ loader: () => import(`./components/${name}.vue`) , loadingComponent: LoadingComponent, delay: 200, errorComponent: ErrorComponent, timeout: 3000, }) }