服务工作线程无法处理 React vite 中的 .tsx/.jsx 文件。为什么？

Question

console.log("service worker");

const OFFLINE_ASSETS = [
  "/",
  "/src/main.tsx",
  "/vite.svg",
  `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmCy16nhIbV3pI1qLYHMJKwbH2458oiC9EmA&s`,
];

const addResourcesToCache = async (resources) => {
  const cache = await caches.open("v1");
  await cache.addAll(resources);
};

self.addEventListener("install", (e) => {
  console.log("installing");
  e.waitUntil(addResourcesToCache(OFFLINE_ASSETS));
});

const cacheFirst = async (req) => {
  const responseFromCache = await caches.match(req);
  if (responseFromCache) {
    return responseFromCache;
  }

  return fetch(req);
};

self.addEventListener("fetch", (event) => {
  event.respondWith(cacheFirst(event.request));
});

它在“/”上显示“index.html”，这是 ii 应该的。 svgs 和图像链接也可以工作，但只有 main.tsx 等在我关闭服务器时无法工作。为什么 ？ 它在 vite 上的 React-ts 上

Answer 1

src/main.tsx 是源文件。当您通过网络浏览器访问文件时，您通常只能访问公共文件（当您进行 vite 构建时，您的 dist/ 文件夹中的文件）

main.tsx 文件不在那里，因为您网站的源代码通常是敏感信息，您不希望随机的人能够读取这些信息

通常，编译器将 tsx 文件编译为原始 html/js/css，并捆绑在最小化文件中。这些文件最终会分发到 /dist/

如果您（出于某种原因，不推荐）希望将 main.tsx 文件复制到 dist 文件夹而不更改名称和内容。你可以使用 vite-plugin-static-copy 。这是一个旨在将静态文件复制到构建输出中的插件

https://www.npmjs.com/package/vite-plugin-static-copy