Vite、MSW 和基本名称

Question

我已经将 Vite 配置为与 MSW 一起拦截我的请求，到目前为止没有任何问题。 public 文件夹中的

mockServiceWorker.js

文件。但是，我需要在我的

vite.config.ts

中添加一个名为 base:

的属性

vite.config.ts

export default defineConfig({
  base: '/kiosk',
  ...other configs...

这样，我还在

package.json

上添加了必要的属性：

package.json

"homepage": "/kiosk",
...other configs...

这破坏了 MSW 功能，并且它不会拦截任何请求。

这就是我当前 MSW 初始化程序中的内容。

import { StartOptions } from 'msw/browser';

export const enableMocking = async () => {
  if (!import.meta.env.DEV) return;

  const { worker } = await import('./browser');
  return worker.start(workerStartOptions);
};

const workerStartOptions: StartOptions = {
  serviceWorker: {
    url: '/kiosk/mockServiceWorker.js'
  },
};

在控制台上收到此消息时，不会拦截任何请求： `[MSW] 无法拦截此页面上的请求，因为它超出了工作人员的范围（“http://localhost:3000/kiosk/”）。如果您希望在此页面上模拟 API 请求，则必须解决此范围问题。

• （推荐）在应用程序的根级别（“/”）注册工作人员。
• 设置“Service-Worker-Allowed”响应标头以允许超出范围的工作人员。`

有什么解决方案可以让 MSW 使用基本路径吗？ 预先感谢！

Answer 1

我在 Vite 和 MSW 上也遇到了这个问题，并运行了这个：

npx msw init /

似乎帮我解决了。

尽管我对我的根项目目录中的mockServiceWorker.js 文件并不完全满意。

将“Service-Worker-Allowed”标头添加到处理程序中可能会起作用。

https://mswjs.io/docs/recipes/custom-worker-script-location/#option-2-service-worker-allowed-response-header