Vue.component动态加载组件@不生效问题

728 阅读1分钟

在开发低代码平台组件时,使用的下面这段代码注册自定义组件

import Vue from "vue";
const components = ["Picture", "VText", "VButton", "Group", "RectShape"];
components.forEach((key) => {

Vue.component(key, () => import(`@/custom-component/${key}`));

});

但是实际调试时一直报错:

image.png

没有正确的解析出'@'符号对应的路径。查阅网上资料找到可能是webpack版本原因,新版本import不支持解析@字符。需要将import替换为require。改为以下代码:

import Vue from "vue";

const components = ["Picture", "VText", "VButton", "Group", "RectShape"];
components.forEach((key) => {

Vue.component(key, (resolve) =>

require([`@/custom-component/${key}`], resolve)

);

});