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']
}
}
}
我又该如何修复它?
7条答案
按热度按时间qzlgjiam1#
同问,我把那个插件注释掉就可以正常解析了。如果不注释,除了改成require不知道还有没有其他解决方案。
k3bvogb12#
@hatch1994 请问你后来解决了吗
wqlqzqxt3#
@hatch1994 请问你后来解决了吗
请问你解决了吗
50pmv0ei4#
请问你解决了吗
tzcvj98z5#
最近也在解决这个问题 最后从框架 babel.config.js 里面跑到文档里面来看
也是注释掉
babel-plugin-dynamic-import-node
就可以了https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/lazy-loading.html
jw5wzhpr6#
请问你解决了吗?
nzkunb0c7#
`/**
*/
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)
方式导入