@web/dev-server环境下Web组件fetch获取template.html返回404问题

问题原因 #

@web/dev-server默认以命令执行的项目根目录作为服务根路径，./template.html这类相对路径是相对于当前访问的页面路由解析，而非相对于JS文件的存放目录，路径不匹配就会返回404。

可落地解决方案 #

• 方案1：改用服务根路径的绝对路径引用
  确认template.html在项目中的路径，从服务根路径开始写全路径即可。比如template.html和facts-and-steps.js同放在/src/components/目录下，代码修改为：

let x = await (await fetch('/src/components/template.html')).text();

如果文件直接放在项目根目录，直接写/template.html即可。

• 方案2：配置静态资源目录
  在项目根目录的web-dev-server.config.js中添加静态资源目录配置，指定模板文件存放的目录为可直接访问的静态资源路径：

// web-dev-server.config.js
export default {
  // 原有配置保留
  staticDirectories: [
    // 可直接写目录路径，也可以配置路径别名
    { path: '/template-dir', directory: 'src/components/templates' }
  ]
}

配置后重启开发服务器，就可以通过/template-dir/template.html访问到目标文件。

• 方案3：直接使用ES模块导入（更适配生态）
  @web/dev-server原生支持带后缀的资源导入，你不需要手动写fetch请求，直接导入即可拿到文件文本：

// ?raw 后缀会直接返回文件的纯文本内容
import templateContent from './template.html?raw';
const x = templateContent;

这种方式不需要考虑服务路径解析问题，相对路径是相对于当前JS文件解析的，适配性更高。

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