不能直接加载远程组件，因其仅声明静态DOM片段且不发起网络请求或执行脚本；动态加载需依赖 import()，再将模块导出的渲染函数作用于克隆的 内容。
HTML 模板技术（<template></template>）本身不参与“动态导入”，它只负责声明惰性 DOM 片段；真正实现组件动态加载的是 JavaScript 的 import()，而 <template></template> 可作为加载后渲染的结构容器——两者职责不同，但能配合使用。
为什么不能用 <template></template> 直接加载远程组件
<template></template> 是纯客户端声明机制，内容不会发起网络请求，也不执行脚本。写 <template src="./widget.js"></template> 完全无效，浏览器会忽略 src 属性（该属性不存在于 HTML 标准中）。常见误解是把它和已废弃的 <link rel="import"> 混淆——后者才是为导入设计的，但已被所有现代浏览器移除。
-
<template></template>只能包含静态 HTML，无法触发 JS 加载或模块解析 - 试图在
<template></template>内写import()会报错：语法非法（不在 JS 执行上下文中） - 服务端渲染（SSR）场景下，
<template></template>内容会被序列化为字符串，但不会被 hydrate 或执行
import() 加载模块后，怎么把结果塞进 <template></template>
典型流程是：点击触发 import() → 得到导出的组件函数/类 → 调用它生成 DOM 节点 → 把节点挂载到克隆后的 <template></template> 内容里。关键不是模板“导入”，而是模板“复用”。
- 先定义
<template id="chart-widget"><div class="chart-root"></div></template> - 加载模块时，确保它导出一个可调用的渲染函数，例如：
export default function renderChart(container) { /* 插入 canvas 等 */ } - 调用逻辑中显式克隆并注入：
const template = document.getElementById('chart-widget');<br>const clone = template.content.cloneNode(true);<br>const container = clone.querySelector('.chart-root');<br>await import('./chart.js').then(m => m.default(container));<br>document.body.appendChild(clone);
路径拼接、变量名、别名这些坑在 import() 里照常存在
即使你用 <template></template> 包裹 UI 结构，动态 import() 的限制一点没少：路径必须是静态字符串字面量，构建工具无法分析变量拼接，原生环境直接抛 Invalid module specifier。
- ✅ 正确：
import('./widgets/search.js')、import('/assets/icons/close.mjs') - ❌ 错误：
import(`./widgets/${name}.js`)、import(basePath + '/ui.js')、import('@/components/Panel.vue')（Vite 别名在动态 import 中不生效） - 大小写和扩展名必须严格匹配文件系统：开发时
Panel.js，部署后若实际是panel.js，就会 404
真正容易被忽略的是错误边界：如果 import() 失败，<template></template> 克隆出来的 DOM 已经插入文档，但里面空空如也——你得手动清空容器或显示 fallback 提示，而不是指望模板自己处理加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
