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

數(shù)據(jù)便捷性： Mock 數(shù)據(jù)支持以 JSON 文件的形式一鍵導(dǎo)入，一鍵導(dǎo)出。

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

install msw-tools 和 msw

npm install -D msw-toolsnpm install -D msw

install mockServiceWorker.js 。每個腳手架生成的項目，靜態(tài)文件目錄可能不同，具體請參考：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 中根據(jù)環(huán)境來動態(tài)加載

// 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 /> 導(dǎo)入

<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>

七、參數(shù)配置base：開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑。

類型： string
默認： /

使用參照：

訪問 URL：https://tiven.cn，對應(yīng)的 Base：/，使用 <msw-tools base="/" /> 。
訪問 URL：https://tiven.cn/service/，對應(yīng)的 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 文件只能放在靜態(tài)文件目錄中（/public），作為 Service Worker 服務(wù)的注冊文件，不參與打包編譯，只能以相對路徑的形式引用，不然 Service Worker 服務(wù)無法注冊，會導(dǎo)致請求攔截不生效。
service Worker API使用限制：只能在 https（已安轉(zhuǎn)證書）、localhost、127.0.0.1 等服務(wù)下使用，否則控制臺會出現(xiàn) [MSW] Mocking enabled (fallback mode) 日志，也就是說 http 域名服務(wù)下不可用。

九、演示體驗Msw-Tools 在線體驗：msw-tools