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

数据便捷性： Mock 数据支持以 JSON 文件的形式一键导入，一键导出。

五、接入使用Method 1: Using npm：(Recommended)

install msw-tools 和 msw

npm install -D msw-toolsnpm install -D msw

install mockServiceWorker.js 。每个脚手架生成的项目，静态文件目录可能不同，具体请参考：Common public directories

npx msw init public/ --saveMethod 2: Using CDN in HTML:

<body><msw-tools base="/"></msw-tools><script src="http://shimg.jingyanzongjie.com/230724/162Z95A4-1.jpg"></script></body>

六、Example以 Vue3 项目为例：

在入口文件 main.js 中根据环境来动态加载

// main.jsimport { createApp } from "vue";import router from "./router";import store from "./store";import App from "./App.vue";import "./assets/css/style.scss";const app = createApp(App);app.use(router).use(store);app.mount("#app");if (process.env.NODE_ENV === "development") {const MswTools = require("msw-tools");new MswTools();}

在根组件 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