当前位置: 首页 > Web前端 > vue.js

[Vue]模块配置加载具体说明

时间:2023-03-31 16:42:21 vue.js

上面[《[Vue] 两种配置化加载组件方案分析》](https://segmentfault.com/a/11...)的补充在选择方案1的前提下,导入部分组件的方法会导致编译错误。有些组件引入方式会产生和方案二一样的效果(即没有入口文件,编译出来的产品是碎片化的)。正确的介绍方法不能偷懒。下面我一一解释1.fullComponentPathplus()=>import(${fullComponentPath})的错误写法:开发环境编译成功,导入组件失败,找不到资源。错误信息是Error:Cannotfindmodule'@/view/Home.vue'ateval(evalat./srclazyrecursive^.*$(app.js:xxx),:xxx:x)和同样部署在生产环境下编译打包没有报错,但是页面加载的时候报错Error:Cannotfindmodule'@/view/Home.vue'atapp.xxxxxxxx.js:12,componentPath加()=>import(@/views/${componentPath})不报错但是没有值:没有入口文件,生产环境编译出来的产品是零散的。这种写法综合了上面提到的两种方案,方案一和方案二的缺点。3.朴实无华但好用的写法路径,名称,组件绑定(直接写routeItem)(中小型项目推荐,最实用)4.有点麻烦,但是配置性强的写法,维护一个nameToComponentMap(复杂的项目,比如有权限的模块,或者需要生产环境灰度验证的推荐)完成并更新到自己的语雀https:///www.yuque.com/diracke...