Как добавить динамическую загрузку компонентов в Vue с использованием Vite и как это сделать после сборки проекта?

Почему после сборки приложения компонент "asynccomp" не загружается?
  • 15 июня 2024 г. 15:21
Ответы на вопрос 2
Для добавления динамической загрузки компонентов в Vue с использованием Vite, вы можете использовать функцию `defineAsyncComponent` из Vue 3. Для этого сначала установите библиотеку:

```bash
npm install @vue/runtime-dom
```

Затем, в вашем коде Vue, вы можете использовать `defineAsyncComponent` для динамической загрузки компонентов:

```javascript
import { createApp, defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'));

const app = createApp({
  components: {
    AsyncComp
  },
  template: `
    <div>
      <AsyncComp />
    </div>
  `
});

app.mount('#app');
```

Чтобы сделать такую же загрузку компонентов после сборки приложения, вам нужно удостовериться, что все компоненты были правильно собраны и доступны в итоговой сборке. Убедитесь, что ваши компоненты имеют правильные относительные пути и были указаны в конфигурации Vite или Vue CLI.

Если компонент "asynccomp" не загружается после сборки, возможно, есть проблемы с путями к файлам компонентов или конфигурацией сборки. Проверьте, что пути указаны правильно и компоненты были правильно собраны. Также убедитесь, что в конфигурации Vite или Vue CLI указаны все необходимые настройки для правильного сборки компонентов.
Ошибка с 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>`
}
Похожие вопросы