Vue3动态组件配置及引入

• /public/config.js，全局配置

const globalConfig = {
	indexComp1: function() {
		return this.comp1;
	}
	indexComp2: function() {
		return :this.comp2;
	}
	comp1: {
		name: "comp1",
		path: "views/components/comp1"
	},
	comp2: {
		name: "comp2",
		path: "views/components/comp2"
	}
}

• /public/index.html，全局配置引入

...
<script src="./config.js"></script>
...

• 通用组件vue

<template>
	<div id="commonComp">
		<component :is="indexComp1"></component>
		<component :is="indexComp2"></component>
	</div>
</template>
<script>
export default {
	name: 'commonComp',
	data() {
		return {
			indexComp1: null,
			indexComp2: null,
		}
	},
	methods: {
		initComponent() {
			// 动态组件引入
			this.indexComp1 = markRaw(require('@/' + globalConfig.indexComp1().path).default);
			this.indexComp2 = markRaw(require('@/' + globalConfig.indexComp2().path).default);
		}
	},
	mounted() {
		this.initComponent();
	}
}
</script>