我的项目使用Laravel和Vue(由Laravel-Mix编译)。并具有以下结构:
我想要的是检查组件的程序文件夹中是否存在组件,并加载其块(如果不是默认情况下,将其加载到components文件夹中)。最后会有多个程序文件夹。程序名称设置在Vuex存储ATM中。我知道其中一部分可以通过Vue标签实现。但这需要显式声明组件,并且我想避免这种情况,因为最终每个组件都需要大量的导入列表。
有一种方法可以完成此操作。您的方式是通过Webpack块拆分。使用动态导入-通过函数导入组件,该函数将返回新的Promises,并且在组件路径中具有'/components/${res}'
之类的内容。首先,我们创建一个Promise,尝试按如下方式加载默认组件:
export default function _getDefaultComponent(res){
return new Promise((resolve, reject) => {
import(
/* webpackChunkName: "js/chunk/[request]" */
@/components/${res}
)
.then((component) => {
resolve(component);
})
.catch((error) => {
reject(error);
});
}
此后,我们创建了用于覆盖的函数:
import _getDefaultComponent from "@/helpers/_getDefaultComponent";
import { program } from "@/store/program";
export default function _getComponent(res){
return new Promise((resolve, reject) => {
let programName = program.state.programName;
import(
/* webpackChunkName: "js/chunk/program/[request]" */
@/@program/${programName}/components/${res}
)
.then((component) => {
resolve(component);
})
.catch((error) => {
_getDefaultComponent(res)
.then((component) => {
resolve(component);
})
.catch((error) => {
console.error(No Component with the name ${res}, error:, error);
reject(error);
});
});
});
}
我们现在要做的是获取程序的名称(在本例中为Vuex),我们尝试在程序文件夹中查找某个组件,如果该组件失败,则退回到默认组件;如果失败,则使用默认组件控制台错误。试图解析的组件名称。最后使用它导入是这样的:
import _getComponent from "@/helpers/_getComponent";
之后,在您的组件中,我们就像:
components:{
Component: () => _getComponent('Component')
}