请教一下, 为什么我从远程获取的路由, `import` 动态 `component` 报错?

[d1y]

小弟想从远程拿到了菜单数组, component 动态引入报错

const formatMenu = menus=> {
  let result = []
  menus.forEach(item=>{
     let b = { ... }
     let nowPath = item.component
     let path = `@/view/${ nowPath  }.vue`
     b.component = ()=> import(path)
  })
}

本地已经在 .babelrc 添加 @babel/plugin-syntax-dynamic-import

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "presets": [
    "@vue/app"
  ]
}

package.json 文件

{
  "name": "iview-admin",
  "version": "2.0.0",
  "author": "Lison<lison16new@163.com>",
  "private": false,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@riophae/vue-treeselect": "^0.4.0",
    "adonis-vue-websocket": "^2.0.2",
    "axios": "^0.18.0",
    "clipboard": "^2.0.0",
    "codemirror": "^5.38.0",
    "countup": "^1.8.2",
    "cropperjs": "^1.2.2",
    "dayjs": "^1.7.7",
    "echarts": "^4.0.4",
    "html2canvas": "^1.0.0-alpha.12",
    "iview": "^3.2.2",
    "iview-area": "^1.5.17",
    "js-cookie": "^2.2.0",
    "moment": "^2.24.0",
    "pinyin": "^2.9.0",
    "simplemde": "^1.11.2",
    "sortablejs": "^1.7.0",
    "tree-table-vue": "^1.1.0",
    "v-calendar": "^1.0.0-beta.22",
    "v-org-tree": "^1.0.6",
    "v-viewer": "^1.4.2",
    "vue": "^2.5.10",
    "vue-avatar": "^2.1.7",
    "vue-i18n": "^7.8.0",
    "vue-loading-spinner": "^1.0.11",
    "vue-router": "^3.1.3",
    "vue-websocket": "^0.2.3",
    "vuedraggable": "^2.16.0",
    "vuex": "^3.0.1",
    "wangeditor": "^3.1.1",
    "xlsx": "^0.13.3"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-plugin-unit-mocha": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-standard": "^3.0.0-beta.10",
    "@vue/test-utils": "^1.0.0-beta.10",
    "babel-eslint": "^8.0.1",
    "chai": "^4.1.2",
    "eslint-plugin-cypress": "^2.0.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lint-staged": "^6.0.0",
    "mockjs": "^1.0.1-beta3",
    "vue-template-compiler": "^2.5.13"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

求教各位大能是啥子原因....尝试过删除 node_modules 文件夹, 在 npm install | cnpm install | yarn 都不行.

需求是从远程拿到路由

// api/user.js
export const getRemoteUserMenu = (role_id)=>{
  return axios.Request({
      url: 'get_menu',
      method: 'get',
      params: {
         role_id
      }
  })
}

// router/index.js
router.beforeEach((,,next)=> {
  if (true){
     getRemoteUserMenu(xx).then(res=>{
         localSave('router', res.data)
         store.commit('updateMenuList', res.data)
     })
  }
})

比较奇怪的, 有时候动态 import 又不会报错.

感谢解答, 感谢各位!

[cwlwebapp]

如果 component 动态引入报错 To install it, you can run: npm install --save _c/user的话是 import引入文件太浅 component: () => import(@/view/nutrition${oitem.component}) 引入两个文件夹方才生效 希望对你有用哦!