I am having a many modal popup in my web app. so in my layout i am injecting the modal components as below.

in template

in setup

watch(useModalStore().modalContent, async (newValue) => {
if (newValue != “”) {
debugger;
CustomModalComponent.value = await defineAsyncComponent(async () => {
return await import(
/* @vite-ignore */ ../components/${newValue}.vue
);
});
}
});

const CustomModalComponent = ref(
  defineAsyncComponent(async () => {
    if (modalContent.value) {
      return await import(
        /* @vite-ignore */ `../components/${modalContent.value}.vue`
      );
    }
  }),
);

modalcontent holds the path to the component file. all modals are of the following path components//modals/modalname

Now this code is working seamlessly in my local when i launch the application using nuxi dev

But the real problem comes when i build this to deploy on a server. I am using nuxi generate and usednpx serve .output/public to run the build in local. All the modals are not working. instead i get the mime type error because the file is not found.