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

对上文[《[Vue] 两种配置化加载组件方案分析》](https://segmentfault.com/a/11...)的补充

在选择方案1的前提下,有的组件引入方式会导致编译报错。有的组件引入方式会会产生与方案2相同的效果(即没有入口文件,编译产物稀碎)。正确的引入方式是不能偷懒的。

下面我来一一说明

1、fullComponentPath加上 () =>import(${fullComponentPath})
错误的写法:
[Vue] 模块配置化加载具体说明_第1张图片

开发环境编译通过但引入组件失败,找不到资源。报错信息为
Error: Cannot find module '@/view/Home.vue'
at eval (eval at ./src lazy recursive ^.*$ (app.js: xxx), : xxx:x)

同样的部署到生产环境,编译打包时不报错,但页面加载时报错
Error: Cannot find module '@/view/Home.vue'
at app.xxxxxxxx.js:1

2、componentPath 加上 () => import(@/views/${componentPath})
[Vue] 模块配置化加载具体说明_第2张图片
不报错但没有价值的写法:无入口文件,生产环境编译产物稀碎。这种写法是前文提到的方案1、方案2两种方案的缺点综合体。

3、朴实无华但可用的写法 path、name、component绑定 (直接写routeItem)
(小、中级别的项目推荐,最具实用性)
[Vue] 模块配置化加载具体说明_第3张图片

4、些许麻烦,但配置性强的写法,维护一份 nameToComponentMap
(复杂项目,如模块带权限、或者需要生产环境灰度验证的推荐)
image.png

完结

同步更新到自己的语雀
https://www.yuque.com/diracke...

你可能感兴趣的:(前端vue.js配置化模块化)