努力一周，开源一个超好用的接口Mock工具——Msw-Tools( 二 ) _生活百科

在根组件 App.vue 中使用 <msw-tools /> 导入

<template><msw-tools base="/" v-if="isDev" /><router-view /></template><script setup>import { ref } from "vue";const isDev = ref(process.env.NODE_ENV === "development");</script>

七、参数配置base：开发或生产环境服务的公共基础路径。

类型： string
默认： /

使用参照：

访问 URL：https://tiven.cn，对应的 Base：/，使用 <msw-tools base="/" /> 。
访问 URL：https://tiven.cn/service/，对应的 Base：/service/，使用 <msw-tools base="/service/" /> 。

需要与打包工具和 Router 路由的 base 保持一致。请参考：

Vite 的 base 配置：Vite Base
Vue3 的 Router/base 路由配置：vuejs.org/zh/api/#createwebhistory" rel="external nofollow noreferrer">Vue3 Base

八、注意事项

mockServiceWorker.js 文件只能放在静态文件目录中（/public），作为 Service Worker 服务的注册文件，不参与打包编译，只能以相对路径的形式引用，不然 Service Worker 服务无法注册，会导致请求拦截不生效。
service Worker API使用限制：只能在 https（已安转证书）、localhost、127.0.0.1 等服务下使用，否则控制台会出现 [MSW] Mocking enabled (fallback mode) 日志，也就是说 http 域名服务下不可用。

九、演示体验Msw-Tools 在线体验：msw-tools
【努力一周，开源一个超好用的接口Mock工具——Msw-Tools】