Я не могу использовать динамический импорт в Vue Router

Question

Я разрабатываю веб-страницу в vuejs и использую webpack 4 и babel 6 для компиляции ресурсов

Когда я ставлю что-то вроде ... route('home', '/', () => import('../pages/home.vue')), компилятор говорит мне Support for the experimental syntax 'dynamicImport' isn't currently enabled, и яне могу использовать этот синтаксис

Мне нужна помощь, спасибо

Это мой package.json: https://gist.github.com/sarmanulco/fd2415c2b81db3df457302c61d77f197

Answer 1

Чтобы использовать dynamicImport, добавьте файл .babelrc (где находится package.json)

Вот содержимое .babelrc :

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Answer 2

Чтобы использовать vue-router с компонентом с отложенной загрузкой:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'homepage',
      component: () => import('@/pages/Home.vue') //lazy loading
    },
  ]
})

Обязательно посмотрите vue-router docs