Vu而异步加载组件需要导入什么包吗

Question

问题描述

直接使用异步的方式，npm run dev提示语法错误

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

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


Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login'),
    hidden: true
  }
] 

export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

你期待的结果是什么？实际看到的错误信息又是什么？

请问如何解决？

Answer 1

syntax-dynamic-import

Answer 2

const router = resolve => require(['@/page/url/url'], resolve)

export default{
    path: "/url",
    name: "name",
    component: router,
    meta: {
      index: 0,
      keepAlive: true,
      title: "title"
    }
}

Answer 3

配置 babel.config.js

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false
      }
    ]
  ],
  
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

• @babel/env 设置 modules 为 false
• 使用插件 @babel/plugin-syntax-dynamic-import