如何基于标签名在Vue中实现组件动态加载？

想要在Vue3 CDN版本中实现：解析HTML模板时，自动识别以Component结尾的标签（如myComponent），若该组件未加载，则从服务器指定URL获取并注册。原代码尝试使用config.isUnknownElements但无效，因为这是Vue2的废弃API，Vue3已改用新配置方案。

核心修改点 #

1. 替换Vue2 API为Vue3正确配置：Vue3中自定义元素检测使用app.config.compilerOptions.isCustomElement，而非isUnknownElements。
2. 异步组件注册：使用Vue3的defineAsyncComponent实现组件懒加载，替代Vue2的回调式注册方式。
3. 修正组件代码解析逻辑：修复正则匹配的错误处理，以及script代码的执行与组件选项提取逻辑。
4. 动态样式注入：将加载到的组件样式缓存并注入页面，避免重复添加。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style id="dynamic-styles">
    /* Dynamically loaded styles will be added here */
  </style>
</head>
<body>
  <div id="app">
    <h1>START</h1>
    <hr>
    <myComponent />
    <anotherComponent />
    <hr>
    <h1>END</h1>
  </div>

  <script>
    const componentCache = {};
    const styleCache = new Set();
    const { defineAsyncComponent } = Vue;

    async function loadComponent(name) {
      if (componentCache[name]) {
        return componentCache[name];
      }

      const url = `http://127.0.0.1:8080/src/${name}.vue`;

      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`Component ${name} not found`);
        
        const componentCode = await response.text();

        // 解析template，处理匹配不到的边界情况
        const templateMatch = componentCode.match(/<template>([\s\S]*?)<\/template>/);
        const template = templateMatch ? templateMatch[1].trim() : `<div>No template found for ${name}</div>`;

        // 解析script，提取组件选项
        const scriptMatch = componentCode.match(/<script>([\s\S]*?)<\/script>/);
        let scriptOptions = {};
        if (scriptMatch) {
          const scriptCode = scriptMatch[1].trim();
          // 模拟模块环境执行script代码，获取export default内容
          const module = { exports: {} };
          new Function('module', 'exports', scriptCode)(module, module.exports);
          scriptOptions = module.exports.default || module.exports;
        }

        // 解析style并注入页面
        const styleMatch = componentCode.match(/<style>([\s\S]*?)<\/style>/);
        if (styleMatch && !styleCache.has(name)) {
          const styleContent = styleMatch[1].trim();
          document.getElementById('dynamic-styles').textContent += styleContent;
          styleCache.add(name);
        }

        // 合并组件选项
        const componentOptions = {
          ...scriptOptions,
          template
        };

        componentCache[name] = componentOptions;
        return componentOptions;
      } catch (error) {
        console.error(error);
        return {
          template: `<div>The component <strong>${name}</strong> is not available.</div>`,
          style: `div {color: red; border: solid 1px red; padding: 8px;}`
        };
      }
    }

    const app = Vue.createApp({
      template: document.getElementById('app').innerHTML,
    });

    // Vue3配置：检测未知标签并动态注册组件
    app.config.compilerOptions.isCustomElement = (tag) => {
      // 匹配以Component结尾的标签（不区分大小写）
      const isComponentTag = /\S+Component$/i.test(tag);
      if (isComponentTag && !componentCache[tag]) {
        console.log('Loading component:', tag);
        // 注册异步组件
        app.component(tag, defineAsyncComponent(() => loadComponent(tag)));
      }
      // 返回false：告知Vue该标签是Vue组件而非原生自定义元素
      return false;
    };

    app.mount("#app");
  </script>
</body>
</html>

关键细节说明 #

• compilerOptions.isCustomElement：Vue解析模板遇到未知标签时会触发该函数。在此处判断标签规则，符合条件则动态注册异步组件，返回false确保Vue将其当作Vue组件处理。
• 异步组件注册：defineAsyncComponent是Vue3标准的异步组件封装方式，支持Promise格式的组件加载逻辑。
• script解析：通过new Function模拟模块环境执行组件script代码，正确获取组件的data、methods等选项。
• 样式缓存：使用styleCache集合记录已注入的组件样式，避免重复添加导致样式冗余。

内容的提问来源于stack exchange，提问作者user1243815