vue-element-admin 从后台动态获取菜单路由拼装生成,异步加载为何不支持import()?

kse8i1jr  于 3个月前  发布在  其他
关注(0)|答案(7)|浏览(49)

Hi, thanks for your help
使用es6 import()

component: (constantRouterComponents[item.component]) ||
        (() => import(
          /* webpackMode: "lazy" */
          '@/views' + item.component
        )),

会解析成

component:
ƒ () {
        return Promise.resolve("".concat(
        /* webpackMode: "lazy" */
        '@/views' + item.component)).then(function (s) {
          return Object(W_Project_factory_go_admin_ui_node_mo…
}

控制台错误:

[vue-router] Failed to resolve async component default: Error: Cannot find module '@/views/user/index'
Error: Cannot find module '@/views/user/index'
    at webpackEmptyContext (eval at ./src/router sync recursive (app.js:4934), <anonymous>:2:10)
    at eval (generator-routers.js?aa0f:76)

为啥别名“@”没有解析?

为什么我使用下面require()方式,完全可以正常工作?

return (resolve) => require(['@/views' + item.component], resolve)

我已升级到vue-cli@4,也采用了文档中的babel插件 babel-plugin-dynamic-import-node

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}

我又该如何修复它?

qzlgjiam

qzlgjiam1#

同问,我把那个插件注释掉就可以正常解析了。如果不注释,除了改成require不知道还有没有其他解决方案。

k3bvogb1

k3bvogb12#

@hatch1994 请问你后来解决了吗

wqlqzqxt

wqlqzqxt3#

@hatch1994 请问你后来解决了吗

请问你解决了吗

50pmv0ei

50pmv0ei4#

请问你解决了吗

tzcvj98z

tzcvj98z5#

最近也在解决这个问题 最后从框架 babel.config.js 里面跑到文档里面来看
也是注释掉 babel-plugin-dynamic-import-node 就可以了
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/lazy-loading.html

jw5wzhpr

jw5wzhpr6#

请问你解决了吗?

nzkunb0c

nzkunb0c7#

`/**

  • 返回路由对应的组件
  • @param item
    */
    function renderComponent(item) {
    if (item.componentType === '1') {
    return Layout
    } else if (item.componentType === '2') {
    return SonIndex
    } else if (item.componentType === '3') {
    // TODO 不能使用import()方式导入
    // return () => import( @/views${item.component} )
    return resolve => require([ @/views${item.component} ], resolve)
    }
    }`

妥协了,最终还是使用 resolve => require([ @/views${item.component} ], resolve) 方式导入

相关问题