vue 异步组件采用参数路径报错

vue在异步加载组件时如下

var name = '../components/AdminHome/UserManager.vue';

var component = () => import(name);

import传入一个参数时会报错:

client?cd17:147 ./src/store/index.js

67:31-43 Critical dependency: the request of a dependency is an expression

@ ./src/store/index.js

@ ./src/main.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

msgWarnings @ client?cd17:147

onmessage @ socket.js?e5d0:38

EventTarget.dispatchEvent @ sockjs.js?3600:170

(anonymous) @ sockjs.js?3600:883

SockJS._transportMessage @ sockjs.js?3600:881

EventEmitter.emit @ sockjs.js?3600:86

WebSocketTransport.ws.onmessage @ sockjs.js?3600:2957

vue.esm.js?efeb:576 [Vue warn]: Failed to resolve async component: function component() {

return __webpack_require__("./src/store lazy recursive")(name);

}

Reason: Error: Cannot find module '../components/AdminHome/UserManager.vue'.

如果是这样直接用字符串就不会有问题:

var component = () => import('../components/AdminHome/UserManager.vue');

回答:

var name = 'components/AdminHome/UserManager.vue';

var component = ()=>import(`@/${name}`)

暂时找到办法了,这样却可以正常加载,到时候找到具体原因再来更新

回答:

楼上有误。import()函数是可以动态载入模块的,import才不支持动态载入。试一下将

var name = '../components/AdminHome/UserManager.vue';

var component = () => import(name);

改成

var name = '../components/AdminHome/UserManager.vue';

var component = () => import(`${name}`);

可能是import()函数的参数不能是表达式,上面修改后参数就是字符串了,并且能动态加载。

回答:

这个可能是import的限制, 不是vue-cli的问题, 不允许动态载入模块, 具体出处没有找到, 我在找找, 但是可以肯定在这个教程中有提到, 你先看下

http://es6.ruanyifeng.com/#do...

回答:

图片描述

回答:

你好,我遇到了同样的问题。但是我按上述方法都没有得到解决方案,请问有没有什么别的办法呀?
clipboard.png

clipboard.png

回答:

如果组件都在components文件夹下按下图做clipboard.png

回答:

感谢 @佘贞标

楼主可以参考import的部分,实现路由懒加载

var routes_config = [{

path: '/sider',

component_path: './pages/manage/index.vue'

}, {

path: '/user',

component_path: './components/test.vue'

}]

// 将全局路由进行注册

var routes = {

routes: (function() {

var list = new Array()

for (let i in routes_config) {

list.push({

path: routes_config[i].path,

component: () =>

import (`${routes_config[i].component_path}`)

// component: httpVueLoader(routes_config[i].component_url)

// 异步组件

// component: function(resolve, reject) {

// // 异步请求组件配置

// axios.get(routes_config[i].component_url).then(response => {

// resolve({

// // response.data = "<h1>User</h1>"

// template: response.data

// })

// })

// }

})

}

return list

})()

}

以上是 vue 异步组件采用参数路径报错 的全部内容, 来源链接: utcz.com/a/150096.html

回到顶部