获取 returns 404 未在 Web 组件中找到

Question

我有一个组件 facts-and-steps.js，我想导入一个包含 <template> 的 HTML 文件。我正在尝试使用 fetch 获取 template.html 文件，但它返回 404 错误。

这是 returns 404 的代码：

let x = await (await fetch('./template.html')).text();
//x prints "Not Found"

我正在使用 Open-wc @web/dev-server - https://modern-web.dev/docs/dev-server/overview/

如何获取文件？

Answer 1

fetch 根据执行位置加载相关资源，而不是加载位置。假设您在 example.com/ 上加载并执行了 example.com/components/facts-and-steps/facts-and-steps.js。它将尝试加载 example.com/template.html。你基本上有几个选择。

加载更完整的路径

fetch('/components/facts-and-steps/template.html')

使用 import.meta. Web.dev has a good guide.

fetch(new URL('./template.html', import.meta.url))

获取 returns 404 未在 Web 组件中找到

Fetch returns 404 not found in web component

javascript

css

web-component