Я использую последнюю версию vue-cli, и все работает в разработке.
После того, как я собрал его, первая страница приложения не отображается должным образом, остальные страницы работают нормально.
Вот как это выглядит на dev:
![enter image description here](https://i.stack.imgur.com/RSDhK.png)
и вот как это выглядит на продукт:
![enter image description here](https://i.stack.imgur.com/9dQqG.png)
Используя инструменты разработки, я вижу, что элементы не отображаются должным образом, поэтому я все еще вижу фактический компонент (например, <aq-filters>
) вместо просто div:
![enter image description here](https://i.stack.imgur.com/kFM3G.png)
Как я уже говорил, это происходит только для этой одной страницы, остальное работает нормально.
Нет ошибки во время сборки или в консоли.
Вот часть кода, который может иметь отношение:
import { createNamespacedHelpers } from "vuex";
import DomainModal from "./AddDomainModal";
import {
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions,
TenantStatusCell
} from "comp";
const { mapGetters, mapActions } = createNamespacedHelpers("domains");
...
components: {
DomainModal,
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions
}
Есть идеи, что здесь происходит?
UPDATE
Я нашел решение, но не знаю, почему оно работает.
В моем файле router.js я использовал динамический импорт для создания чанков, за исключением первой страницы (доменов), которую я импортировал статически:
{
path: "/domains",
name: "domains",
component: DomainsPage,
meta: { requiresAuth: true }
},
Как только я изменил его на динамический импорт, это решает проблему:
{
path: "/domains",
name: "domains",
component: () =>
import("@/views/domains/DomainsPage" /* webpackChunkName: "DomainsPage" */),
meta: { requiresAuth: true }
},
Кто-нибудь может это объяснить?