vue-element-admin icon indicating copy to clipboard operation
vue-element-admin copied to clipboard

Published 20 hours ago • verified publisher icon PanJiaChen

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

Open hatch1994 opened this issue 5 years ago • 7 comments

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']
    }
  }
}

我又该如何修复它?

hatch1994 avatar Aug 19 '20 06:08 hatch1994

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

fangxy926 avatar Aug 28 '20 03:08 fangxy926

@hatch1994 请问你后来解决了吗

coderja avatar Nov 17 '20 04:11 coderja

@hatch1994 请问你后来解决了吗

请问你解决了吗

Bai2White avatar Sep 16 '21 12:09 Bai2White

请问你解决了吗

892041548 avatar Mar 08 '22 10:03 892041548

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

LeoMcZhang avatar Mar 09 '22 16:03 LeoMcZhang

请问你解决了吗?

JiaChenHuang avatar Jun 07 '23 07:06 JiaChenHuang

`/**

  • 返回路由对应的组件
  • @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)方式导入

JiaChenHuang avatar Jun 07 '23 07:06 JiaChenHuang