@HitTheNails

Как подключить динамический импорт компонент во vue-router?

Здравствуйте.
На одном проекте (laravel, vue, vue-router, laravel-mix) очень разрослось количество роутов во vue, в связи с чем было принято решение динамически подгружать чанки для конкретных компонент, связанных с роутами.
Почитав пару мануалов, код скомпилировался, но при переходе на данные маршруты непосредственно из браузера ничего не работает и падает с ошибкой.
5da704eaa7080804326451.png
Что с этим можно сделать?
Код подключения роутов:
const EmployeesList = () => import(
  /* webpackChunkName: "EmployeesList" */
  'components/NewPages/EmployeesList/List/index.vue'
  );
const EmployeesListDetail = () => import(
  /* webpackChunkName: "EmployeesListDetail" */
  'components/NewPages/EmployeesList/Detail/index.vue'
  );

export default [
  {name: 'employees-list', path: '/employees', component: EmployeesList, meta: {title: 'Сотрудники'}},
  {
    name: 'employees-detail',
    path: '/employees/detail/:id?',
    component: EmployeesListDetail,
    meta: {title: 'Сотрудники'}
  },
];
  • Вопрос задан
  • 346 просмотров
Пригласить эксперта
Ответы на вопрос 1
@its2easyy
Была когда то проблема с таким импортом, нагуглил решение которое заработало. Импорт вызывается через обёртку:
function interopDefault(promise) {
    return promise.then(m => m.default || m);
}
const HomePage = () => interopDefault(import( /* webpackChunkName: "blabla" */  '~/pages/HomePage'));

Хотя может тут и другой случай, учитывая что ошибка со style-loader
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы