我无法在vue路由器中使用动态导入

Posted 2021-03-28

我正在开发一个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

答案

要使用带有延迟加载组件的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

另一答案

要使用dynamicImport，请添加.babelrc文件（package.json所在的位置）

这是.babelrc的内容：

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