Question

vue2.6项目中有大量弹出组件。为了避免手动导入许多组件，单击按钮后将动态组装要弹出的组件的路径，然后使用render函数将其呈现在页面上，以便可以检索项目符号。窗户组装。但是，打包Webpack之后，只有两个文件app.js和vendor.js，并且组件没有分开。（使用vue-cli3默认的Webpack配置）

根据vue文档，使用import语法导入组件，然后与webpack合作进行代码分段，但是render函数没有生效，请使用require语法使render函数生效。

AsyncLoadComp.vue

<script>
export default {
  props: {
    componentPath: {
      type: String
    }
  },
  render(h, cxt) {
    return h(require(`./${this.componentPath}.vue`).default, {});
  },
};
</script>

index.vue

单击按钮时动态更改componentPath的值，类似于“ ./component/HelloWord.vue”，然后将此参数传递给AsyncLoadComp组件。

<async-load-comp v-for="path in componentPath" :key="path" :componentPath="path"/>

如何解决VueJs组件的按需加载？

0 个答案: