ParcelJs打包非入口组件HTML内锚点链接路径报错如何解决？

首先明确两个报错的根因：

• 写/someFolderInPages/index.html这类以/开头的绝对路径时，Parcel默认从项目根目录解析路径，而目标文件实际存放在根目录下的pages文件夹内，自然无法匹配到对应资源导致解析失败。
• 写../pages/someFolderInPages/index.html这类相对路径时，Parcel会将该路径指向的HTML识别为新的打包入口，和你打包命令中直接指定的pages目录下的入口文件重复，因此触发bundle名称唯一的报错。

完全不需要放弃独立HTML组件的写法，以下三个方案都可以快速解决问题：

• 方案1：给锚点标签添加data-parcel-ignore属性，告知Parcel跳过处理该标签的href路径。直接按照部署后的实际访问路径写即可，示例：

  <a href="/someFolderInPages/index.html" data-parcel-ignore>跳转链接</a>
  

  该方案无需修改其他配置，适合路径固定、不需要Parcel做资源哈希映射的场景。
• 方案2：配置路径别名，在项目根目录的package.json中添加alias配置，将根路径映射到pages目录：

  {
    "alias": {
      "/*": "./pages/*"
    }
  }
  

  配置完成后直接写/someFolderInPages/index.html即可被Parcel正确解析，还能自动处理打包后的路径改写。
• 方案3：运行时动态赋值href。在组件HTML中用自定义属性存目标路径，JS插入DOM时再赋值给href属性：
  组件HTML示例：

  <a data-target="/someFolderInPages/index.html">跳转链接</a>
  

  组件JS示例：

  import compHtml from 'bundle-text:./index.html';
  const dom = new DOMParser().parseFromString(compHtml, 'text/html').body.firstChild;
  const aTag = dom.querySelector('a');
  aTag.href = aTag.dataset.target;
  // 后续插入文档的逻辑保持不变
  

  该方案完全绕开Parcel对HTML内href的静态解析，适合需要灵活处理路径的场景。

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