Vue + Vite: динамическая загрузка компонентов, как загрузить после build?

Question

[Nikita Bel]

Есть приложение App.vue. Динамически загружается компонент "asynccocmp". Загрузка работает в режиме dev-сервера,
но после сборки при загрузке упакованного бандла компонент не загружается - в консоли Chrome ошибки:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

TypeError: Failed to fetch dynamically imported module: host/static/js/datatable/components/asynccomp.vue

Код App.vue

<template>
  <div>Main APP</div>
    <div>
    <component
      :is="asynccomp"
    ></component>
  </div>
</template>

<script setup>
  import { shallowRef, defineAsyncComponent } from 'vue'
    
  const asynccomp= shallowRef(null)
  asynccomp.value = defineAsyncComponent(() => import("./components/asynccomp.vue"));
</script>

Содержимое файла asynccomp.vue:

<template>
  <div>
    <h2>Async loaded component</h2>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  onMounted(() => {
      console.log("Async mounted!")
  })
</script>

Answer 1

[Nikita Bel]

Ошибка с MIME type решилась на стороне Web-сервера отдающего .vue файлы, Django.
В setting.py добавляется:

mimetypes.add_type("application/javascript", ".vue", True)

А вот сам компонент должен быть оформлен в другом виде:

export default {
  props: {
  },
  data() {
    return {
      hellow: String
    }
  },
  mounted() {
    console.log("Acomp loaded!")
    this.hellow = "Hello!"
  },
  template: `<div>
    <h2>ALoad component {{ hellow }}</h2>
  </div>`
}