<template>
<div>
<component
ref="form"
v-if="component"
:is="component"
:obj="paramObj"
></component>
</div>
</template>
<script>
export default {
name: "flowForm",
components: {},
props: {
paramObj: {
type: Object,
default: {
type:'see'
}
},
computed: {
loader() {
if (!this.formUrl) {
return null;
}
// return () => import(`@/${this.formUrl}`);
// return eval(`()=>import("@/${this.formUrl}")`)
// return resolve => require(['@/' + this.formUrl], resolve)
return () => require.ensure([], (require) => require(`@/${this.formUrl}`))
},
},
data() {
return {
component: null,
formUrl: "",//后端返回的路径
};
},
mounted() {
this.openDevelopeForm()
},
methods: {
openDevelopeForm() {
this.loader()
.then(() => {
this.component = () => this.loader();
})
.catch((e) => {
console.log(e)
this.component = null;
});
},
};
</script>
require 有变量在打包的解析的时候会有问题,会造成加载所有变量.vue的文件
所以在运行时,network会运行很多js文件
import 不会有这个问题
但是当项目过大的时候解决开发时编译过慢会在babel.config.js中导入
plugins: [‘dynamic-import-node’] 插件,但是这个插件和import不兼容