Vue-element-admin: 开发环境异步路由组建加载报错

[Gabriel-he]

工程下载安装后，npm run dev报出警告，如下：

浏览器控制台报错如下：

原工程代码完全没有改，build prod后是能够正常运行的，仅在开发环境下出现这样的问题，望各位帮助一二。

Other relevant information（格外信息）

• Your OS: mac 10.13
• Node.js version: 12.16.2
• vue-element-admin version:4.2.1

[chuzhixin]

问题已解决！！！router懒加载的问题临时解决方法：改成require方式
router懒加载的问题临时解决方法：改成require方式
打开自己router文件夹下的index.js,把所有的import改成如下方式
component: (resolve) => require(["@/views/login/index"], resolve),
参考地址
https://github.com/chuzhixin/vue-admin-beautiful/blob/master/src/router/index.js

[yang813]

我也遇到这样的问题，请问是什么原因呢，后面不能用异步加载了吗

[chuzhixin]

我也遇到这样的问题，请问是什么原因呢，后面不能用异步加载了吗

webpack的问题 国外手一抖，国内死一片

[liona329]

问题已解决！！！router懒加载的问题临时解决方法：改成require方式
router懒加载的问题临时解决方法：改成require方式
打开自己router文件夹下的index.js,把所有的import改成如下方式
component: (resolve) => require(["@/views/login/index"], resolve),
参考地址
https://github.com/chuzhixin/vue-admin-beautiful/blob/master/src/router/index.js

赞

[chuzhixin]

又有了新方案
babel-plugin-dynamic-import-node安装到低版本

[yongyangwu]

不明白为啥会出现这样的问题

[wplstart]

import index from '@/views/login/index'

{
path: '/login',
component: index,
hidden: true
},

这样写似乎也行。

[jsxiao]

添加了一个依赖解决：

"devDependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
}

[Gabriel-he]

问题已解决！！！router懒加载的问题临时解决方法：改成require方式
router懒加载的问题临时解决方法：改成require方式
打开自己router文件夹下的index.js,把所有的import改成如下方式
component: (resolve) => require(["@/views/login/index"], resolve),
参考地址
https://github.com/chuzhixin/vue-admin-beautiful/blob/master/src/router/index.js

给大佬点赞👍

[DaWei-GeGe]

我这动态懒加载
store/modules/permission.js export const loadView = (view) => { // 路由懒加载 return () => impot(@/views${view}) }
修改为
export const loadView = (view) => { // 路由懒加载 return (resolve) => require([@/views${view}], resolve) }
就可以了

[qzzm]

添加了一个依赖解决：

"devDependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
}

增加了这个 babel.config.js 也增加了 @bable/plugin-syntax-dynamic-import 也不行呢 具体怎么弄呀

[jsxiao]

添加了一个依赖解决：

"devDependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
}

> 增加了这个 babel.config.js 也增加了 @bable/plugin-syntax-dynamic-import 也不行呢 具体怎么弄呀

换了一台电脑重新 npm install 还是会出现 cannot find module xxxx 问题

解决

1. 添加依赖

"devDependencies": {
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
}

1. 编辑router/index.js

// 下面这行代码删掉
route.component = view(component)

// 改为如下
route.component = r => require.ensure([], () => r(require(`@/views/${component}.vue`)))

原因

webpack4中动态import不支持变量方式。require没有这个问题。你可以试一下，import('@/views/febs/system/user/Index.vue') 这种是完全没问题的。改为变量方式就不行了。

[nculijun]

已解决：
1.添加依赖："babel-plugin-dynamic-import-node": "2.3.0",
2.删除原来的 node_modules
3.使用淘宝镜像库：npm config set registry http://registry.npm.taobao.org
4.重新安装依赖：npm i

[qzzm]

已解决：
1.添加依赖："babel-plugin-dynamic-import-node": "2.3.0",
2.删除原来的 node_modules
3.使用淘宝镜像库：npm config set registry http://registry.npm.taobao.org
4.重新安装依赖：npm i

修改babel.config.js文件

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

这个是正解 亲测成功 谢谢~

https://www.jianshu.com/p/6a3aef400584